用 


全 彩 版 时 间 就 是 财富 ， 效 率 就 是 生命 ! 
跟着 视频 学 练 做 ， 快 速 从 入 门 到 精通 ! 
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九州 书 源 O 编 著 


105 节 交互 式 视频 讲解 ， 可 模拟 操作 和 上 机 练习 ， 边 学 边 练 更 快捷 ! 

实例 素材 及 源 文件 ， 跟 着 书 中 或 视频 中 的 实例 及 练习 操作 时 ， 直 接 调 用 更 方便 ! 
9 全 彩印 刷 ， 据 弃 “ 黑 白 ”， 进 入 “全 彩 ” 新 时 代 ! 
372 页 数字 图 书 ， 在 电脑 上 轻松 翻 页 阅读 ， 不 一 样 的 感受 ! 
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内 容 简 介 


《新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 》 一 书 详细 而 又 全 面 地 介绍 了 学 习 网 页 制 
作 的 相关 知识 ， 主 要 内 容 包括 : 快速 解读 网 站 、 制 作 简单 绚丽 的 网 页 、 网 页 布局 、 表 单 与 动态 网 页 的 制 
作 、 绘 制 与 编辑 Flash 图 形 、 快 速 管理 Flash 中 的 素材 、 制 作 网 页 简单 动画 、 制 作 并 发 布 交互 式 动画 、 在 
Photoshop 中 制作 网 页 主体 界面 、 编 辑 网 页 图 像 、 网 页 设计 技巧 等 。 最 后 一 章 还 通过 制作 一 个 完整 的 商业 


网 站 实例 ， 


对 全 书 内 容 进行 了 较为 综合 的 演练 。 


本 书 内 容 全 面 ， 图 文 对 应 ， 讲 解 深 浅 适 宜 ， 叙 述 条 理 清楚 ， 并 配 有 多 媒体 教学 光盘 ， 对 学 习 网 站 制 
作 的 初 、 中 级 用 户 有 很 大 的 帮助 。 本 书 适 用 于 公司 职员 、 在 校 学 生 、 教 师 以 及 各 行 各 业 网 页 制作 相关 人 
员 进行 学 习 和 参考 ， 也 可 作为 各 类 电脑 培训 班 的 网 页 制作 教材 。 
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PREFACE 铝 


Dreamweaver、Flash、Photoshop 是 Adobe 公司 推出 的 
网 页 制作 软件 ， 其 中 ，Dreamweaver 用 于 制作 网 页 页 面 ; 
Flash 用 于 制作 网 页 中 一 些 广告 动画 效果 ; Photoshop 用 于 
设计 网 页 外 观 以 及 处 理 网 站 中 需要 的 图 像素 材 。 虽 然 ， 对 
于 初学 者 来 说 Dreamweaver 可 以 制作 一 些 简 单 的 网 站 , 但 
这 些 网 站 往往 功能 单一 且 界 面 简单 ， 而 对 于 网 页 制作 高 手 
来 说 ，Dreamweaver 并 不 能 完成 所 有 网 站 素材 的 制作 ， 但 通 
过 Flash 与 Photoshop 的 弥补 ， 就 能 制作 出 既 美观 又 实用 的 
网 站 。 本 书 将 针对 用 户 的 疑问 和 升级 的 知识 点 ， 以 CS6 版 
本 为 例 ， 为 广大 网 页 制作 初学 者 、 网 页 制作 爱好 者 讲解 使 
Dreamweaver 制作 网 页 的 过 程 、 使 用 Flash 制作 动画 的 方法 
和 使 用 Photoshop 设计 网 页 界面 的 技巧 ， 从 全 面 性 和 实用 性 
出 发 ， 让 用 户 在 最 短 的 时 间 内 达到 从 网 页 制作 初学 者 变 为 网 
页 制作 高 手 的 目的 。 


本 书 结合 Dreamweaver、Flash、Photoshop 3 个 软件 进 
行 网 站 制作 的 讲解 。 当 您 在 茫茫 书 海中 看 到 本 书 时 ， 不 妨 翻 
汉人 关注 一 下 它 的 特点 ， 相 信 它 一 定 会 带 给 您 惊喜 。 

小 时 学 知识 . 44 小 时 上 机 : 本 书 以 实用 功能 讲解 为 

es 0 学 习 部 分 以 操作 为 主 . 

讲解 每 个 知识 点 的 操作 和 用 法 . 操作 步骤 详细 、 目 标明 确 : 

机 部 分 相当 于 一 个 学 习 任 务 或 案例 制作 .同时 在 每 章 最 后 

提供 有 视频 上 机 任务 ， 书 中 给 出 了 操作 要 求 和 关键 步骤 . 具 
体操 作 过 程 放 在 光盘 演示 中 。 

知识 丰富 简单 易学 . 书 中 讲解 由 浅 入 深 . 操作 步骤 目标 
明确 . 并 分 小 步 讲 解 . 与 图 中 的 操作 提示 相对 应 . 并 穿插 了 “ 提 
个 醒 ”、“ 问 题 小 贴 十 ”和 “经 验 一 等 乱 ” 等 小 栏目 。 其 中 也 
“ 提 个 醒 主要 是 对 操作 步骤 中 的 一 些 方法 进行 补充 或 说 明 : ee 图 
“问题 小 贴 十 "是 对 用 户 在 学 习 知 识 过 程 中 产生 疑惑 的 解答 . 下 贡 
而 “经 验 一 自信 ” 则 是 对 知识 的 总 结 和 技巧 ， 以 提高 读者 对 J 
软件 的 掌握 能 力 。 

技巧 总 结 与 提高 , 


获 于 党 季 下 六 坦 凡 本 上 昌 了 济 过 中 ※ 
- 汪 夭 地 各 了 下课 进 内 西 认 了 漠 姓 英 嘻 ※ 
-着 学 东北 魏 包 放手 妾 评 促 过 册 瑟 尾 风 ※ 


。《《 (于 9SO douysoyoud+uselJ+J9Ae9MwWealg) 荣 : 再 误 汉中 水 》 尘 EE 过 :号 淡 


“ 咕 淳 好久 轩 玉 了 舱 置 认 丁 疹 间 闻 这 议院 汀 守 ※ 
-可 啉 巴 到 站 上 营 本 六 坦 内 记过 评 供 了 济 潭 洁 ※ 


… 淘 六 沼 | 和 录 芥 西 了 到 由 交 他 | 斌 亚当 训 以 济 漳 告 ※ 
“… 蔬 置 遍 中 入 能 症 六 六 闻 | 六 坦 过 评 信 济 潭 守 ※ 


和 连 站 列 遇 了 学 习 网 本 可 


还 在 “72 小 时 后 该 ee E 
过 程 中 应 该 注意 的 问题 以 提 。 


加 
| 加 | | 加 nm | 


二 计 滞 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


高 用 户 的 学 习 效果 。 

书 与 光盘 演示 相 结 合 ， 本 书 的 操作 部 分 均 在 光盘 中 提供 了 视频 演示 . 并 在 书 中 指出 了 相 
对 应 的 路 径 和 视频 文件 名 称 . 读者 可 以 打开 视频 文件 对 某 一 个 知识 点 进行 学 习 。 

排版 美观 .全 彩印 刷 ， 本 书 采用 双 栏 图 解 排版 . 一 步 一 图 . 图 文 对 应 . 并 在 图 中 添加 了 
操作 提示 标注 .以 便于 读者 快速 学 习 。 

配 超 值 多 媒体 教学 光盘 ,本 书 配 有 一 张 多 媒体 教学 光盘 .提供 有 书 中 操作 所 需 的 素材 、 
效果 和 视频 演示 文件 .同时 光盘 中 还 赠送 了 大 量 相 关 的 教学 教程 。 
赠 电 子 版 阅读 图 书 ， 本 书 制作 有 实用 、 精 美的 电子 版 放置 在 光盘 中 .在 光盘 主 界面 中 单 
击 “ 电 子 书 ”按钮 可 阅读 电子 图 书 . 单 击 “返回 ”按钮 可 返回 光盘 主 界面 . 单 击 “ 观 看 多 媒 
体 演示 ”按钮 可 打开 光盘 中 对 应 的 视频 演示 . 也 可 一 边 阅 读 一 边 进行 其 他 上 机 操作 。 


国 “ 本 书 的 内 容 


本 书 共 分 为 5 部 分 ， 用 户 在 学 习 的 过 程 中 可 循序 渐进 ， 也 可 根据 自身 的 需求 ， 选 择 需要 
的 部 分 进行 学 习 。 各 部 分 的 主要 内 容 介绍 如 下 。 

使 用 Dreamweaver 制作 网 页 页 面 (第 1~4 章 ) : 主要 介绍 使 用 Dreamweaver 制作 网 
页 页 面 的 方法 . 包括 网 站 建设 、 网 站 开发 环境 配置 、 制 作 简单 的 网 页 、 添 加 网 页 元 素 、 使 
CSS 美化 网 页 、 使 用 表格 对 网 页 进行 布局 、 使 用 DIV+CSS 进行 网 页 布局 、 使 用 框架 进行 网 
页 布局 、 表 单 和 行为 的 使 用 及 制作 动态 网 页 等 内 容 。 

使 用 Flash 制作 网 页 中 的 动画 (第 5~8 章 ) : 主要 介绍 使 用 Flash 制作 网 页 动画 的 方法 . 
包括 使 用 Flash 绘制 与 填充 对 象 、 制 作 动画 特效 文字 、 编 辑 对 象 、 认 识 图 层 与 时 间 轴 、 创 建 
元 件 与 使 用 “ 库 ”、 创 建 基本 动画 、 制 作 多 媒体 Flash 动画 、 制 作 脚本 动画 和 Flash 的 优化 
与 发 布 等 内 容 。 

使 用 Photoshop 制作 网 页 图 像 (第 9~10 章 ) ， 主要 介绍 使 用 Photoshop 制作 网 页 图 
像 的 方法 . 包括 编辑 和 绘制 网 页 界面 、 使 用 路 径 绘制 网 站 标志 、 制 作 网 页 文字 、 网 页 切片 的 
输出 、 图 像 的 编辑 与 色彩 的 调整 、 使 用 图 层 和 滤 镜 美化 图 像 等 内 容 。 

网 页 设计 技巧 (第 11 章 ) ， 主要 介绍 网 页 设计 技巧 . 包括 网 页 制作 原理 及 技巧 、 网 页 
配色 原理 、 a 网 页 版 面 布 局 设计 等 内 容 。 

综合 实例 { 第 12 章 ) 综合 运用 本 书 的 图 形 绘制 .元 件 编辑 .动画 制作 和 多 媒体 插入 等 知识 . 
练习 制作 订 be 网 站 宣传 动画 以 及 订餐 网 站 首页 。 


本 书 由 九州 书 源 组 织 编写 ， 参 加 本 书 编写 、 排 版 和 校对 的 工作 人 员 有 陈 晓 颖 、 刘 霞 、 曾 
福全 、 向 萍 、 雇 宵 、 李 星 、 贺 丽 娟 、 彭 小 霞 、 何 晓 琴 、 蔡 雪 梅 、 包 金 凤 、 杨 怡 、 李 冰 、 张 丽 丽 、 
张 使 、 张 良 军 、 简 超 、 朱 非 、 付 琦 、 何 周 、 董 莉莉 、 张 娟 。 

如 果 您 在 学 习 的 过 程 中 遇 到 什么 困难 或 疑惑 ， 可 以 联系 我 们 ， 我 们 会 尽快 为 您 解答 ， 联 
系 方式 为 : 

QQ 群 ，122144955、120241301 ( 注 : 选择 一 个 QQ 群 加 入 . 不 需 重 复 加 入 多 个 群 ) 。 

网 址 ， http://www.jzbooks.com。 


于 作者 水 平 有 限 ， 书 中 玻 漏 和 不 足 之 处 在 所 难免 ， 欢 迎 读者 不 音 赐教 。 
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学 习 小 时 ; 网 站 的 建设 及 流程 

oo @ 网 站 开发 环境 配置 
在 学 习 制作 网 站 的 方法 前 ， 用 户 需要 先 了 ; 
解 网 站 及 网 页 的 相关 知识 ， 包 括 什么 是 网 页 、 网 ， 
页 的 类 型 、 建 设 网 站 前 需要 的 准备 工作 以 及 网 站 : 

建设 的 流程 等 ， 熟悉 这 些 知识 后 ， 就 可 以 开始 在 : 。 @ 征 
Dreamweaver CS6 中 配置 网 站 的 开发 环境 ， 进 行 。 
网 页 设计 的 具体 工作 了 。 : 


上 机 了 小 时 


二 计 河 新手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


1.1 网 站 的 建设 及 流程 


在 学 习 建 设 网 站 前 ， 应 该 先 了 解 网 站 及 网 页 的 相关 知识 ， 从 而 快速 方便 地 分 辨 各 种 网 站 
的 类 型 及 作用 。 在 建设 网 站 时 ， 还 需要 了 解 网 站 的 建设 流程 ， 并 对 建设 好 的 网 站 进行 发 布 ， 否 


则 就 失去 了 建设 网 站 的 原本 意义 。 下 面 将 对 网 站 、 网 页 、 网 站 类 型 和 创建 及 发 布 网 站 的 相关 流 
程 进行 介绍 。 
ESSN------ 

驴 了解 网 站 和 网 页 。 学 握 购 买 服务 器 空间 和 域名 的 操作 方法 。 


1 纺 掌握 网 站 类 型 的 分 类 。 a | | || | 


1.1.1 网 站 和 网 页 的 认识 

网 站 是 由 单个 或 多 个 网 页 组 成 的 集合 。 在 互联 网 上 ， 网 站 表现 为 一 个 个 相互 链接 的 网 页 ， 
单 击 网 页 中 的 链接 就 可 打开 相应 网 页 。 而 在 电脑 中 , 网 站 表现 为 一 个 网 页 文件 及 文件 夹 的 集合 
而 网 页 则 是 一 个 个 文件 ， 当 浏览 者 进入 某 个 网 站 时 ， 在 浏览 器 中 观看 到 的 文字 、 图 片 、 动 画 、 
视频 以 及 可 以 互动 的 一 些 元 素 组 成 的 页 面 即 为 网 页 。 


ET TY 


好 优惠 …- 


而 家 店铺 反 利 泛 诅 
而 女装 / 情 品 
会 轴 闫 

加 女 粒 

病 御 包 皮具 

二 关 容 护 扶 

机 后 家 日 用 

己 竹 机 

窜 间 馆 


四 经 验 一 敌 仍 一 一 网 页 文件 的 扩展 名 


在 网 站 中 ， 网 页 文件 的 扩展 名 主要 包括 .htm、.html、.php、.asp、.aspx 和 .jsp 等， 这些 文件 通 
过 浏览 器 解析 后 就 可 以 呈现 出 丰富 多 彩 的 网 页 效果 。 


1.1.2 ”网 站 类 型 

按照 网 站 实现 功能 不 同 ， 可 将 网 站 分 为 资讯 门户 类 网 站 、 企 业 品牌 类 网 站 、 交 易 类 网 站 、 
办 公 及 政府 机 构 网 站 、 社 区 网 站 、 互 动 游戏 网 站 、 有 偿 资讯 类 网 站 及 各 种 功能 性 网 站 等 。 不 同 
的 网 站 类 型 通常 有 不 同 的 风格 ， 其 结构 、 功 能 都 不 一 样 ， 因 此 在 进行 网 站 建设 前 必须 了 解 各 类 
网 站 类 型 的 特点 ， 并 进行 相应 的 规划 。 下 面 将 分 别 对 常见 的 网 站 类 型 进行 介绍 。 


个 资讯 门户 类 网 站 : 资讯 门户 类 网 站 以 提供 
信息 资讯 为 主要 目的 ， 是 目前 最 普遍 的 网 站 
形式 之 一 。 这 一 类 型 的 网 站 有 栏目 多 、 信 息 
量 大 和 访问 群体 广 的 特点 。 其 基本 功能 通常 
包含 检索 、 论 坛 和 留言 等 ， 也 有 一 些 提供 简 
单 的 浏览 权限 控制 。 比 较 典 型 的 资讯 门户 类 
网 站 有 新 浪 、 搜 狐 、 新 华 网 等 。 
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个 交易 类 网 站 : 交易 类 网 站 以 实现 交易 为 目 
的 ， 以 订单 为 中 心 。 交 易 的 对 象 可 以 是 企业 
(B2B) ， 也 可 以 是 消费 者 (B2C ) 。 该 类 
网 站 一 般 需 要 有 产品 管理 、 订 购 管理 、 订 单 
管理 、 产 品 推荐 、 支 付 管理 、 收 费 管理 、 收 
发 货 管理 、 会 员 管 理 等 基本 系统 功能 。 部 分 
企业 品牌 类 网 站 也 具有 交易 功能 。 如 下 图 所 
示 的 淘宝 网 即 为 交易 类 网 站 。 
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区 家 毛 R 省 大 雪夫 车 令 于 童 共 打 计 入 大 人 广 让 滞 保 医 广 


天 活 聚 划算 ”超市 。 拍 志 一 询 网 电器 城 Hitao 妆 扮 放行 


便 淘 主 生态 农业 


来 自 山村 的 邀请 


源头 甄选 , 农 人 自 产 
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快速 解读 网 站 


拟 企业 品牌 类 网 站 : 企业 品牌 类 网 站 要 求 展 
示 企 业 综 合 实力 , 体现 企业 CIS 和 品牌 理念 。 
企业 品牌 网 站 特别 强调 创意 ， 对 于 美工 设计 
要 求 较 高 ， 精 美的 Flash 动画 是 常用 的 表现 
形式 。 对 网 站 内 容 组 织 策划 、 产 品 展示 体验 
方面 也 有 较 高 要 求 。 该 类 网 站 利用 多 媒体 交 
互 技术 和 动态 网 页 技术 ， 针 对 目标 客户 进行 
内 容 建 设 ， 以 达到 品牌 营销 传播 的 目的 。 
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符号” 联想 官方 网 上 商城 


rd 


可 IT ， 干 所 电脑 > ro 于 本 系列 ;Yo 二 上 5 > 联 起 YOGA 于 本 enue 村 他 Windows 。 


所 办公 及 政府 机 构 网 站 : 办 公 及 政府 机 构 网 
站 主要 分 为 企业 办 公事 务 类 网 站 和 政府 办 公 
类 网 站 两 大 类 。 企 业 办 公事 务 类 网 站 主要 包 
括 企业 办 公事 务 管理 系统 、 人 力 资源 管理 系 
统 、 办 公 成 本 管理 系统 和 网 站 管理 系统 等 。 
政府 办 公 类 网 站 利用 外 部 政务 网 与 内 部 局 域 
办 公 网 络 运行 .网 站 面向 社会 公众 提供 资讯， 
也 可 提供 网 上 业务 与 查询 等 。 
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证 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


所 社区 类 网 站 : 社区 网 站 主要 用 于 具有 相同 
兴趣 爱好 的 网 友 进 行 交流 , 比如 猫扑 天涯 等 ， 
当然 部 分 门户 网 站 也 有 自己 的 论坛 。 


pF 3 
三 同日 20:30 烛 实 出 磊 


| 二: 翅 乐 作 扑 天 水 议 情 县 天 地 国际 了 至 经济 论坛 


* 献 给 2014 宫 酬 ， 百 年 共和 之 团 

，87 女 对 人 生 夺 型 | 绝望 迷 洗 

，【 鱼 眼看 世界 ]】 今天 摘 死 丹 永 元 ， 明 天 拉 死 我 们 自己 

， 交 通 事 故 达 成 协议 和 调解 书 以 后 的 星相 ,求教 大 家 ! 先 谢谢 了 ! 


如 互 动 游戏 网 站 : 互动 游戏 网 站 是 近年 来 国 
内 逐渐 风靡 起 来 的 一 种 网 站 。 这 类 网 站 的 投 
入 是 根据 所 承载 游戏 的 复杂 程度 来 定 ， 其 发 
展 趋势 是 向 超 巨型 方向 发 展 。 


户 有 偿 资讯 类 网 站 : 有 偿 资讯 类 网 站 与 资讯 
类 网 站 有 点 相似 ， 也 是 以 提供 资讯 为 主 。 不 
同 的 是 ， 有 偿 资讯 类 网 站 提供 的 资讯 要 求 直 
接 有 偿 回 报 。 这 类 网 站 的 业务 模型 一 般 要 求 
访问 者 按 次 、 按 时 间或 按 量 付费 。 


eer 
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EEC 


信条 | 机 了 点 | 专题 4 析 | 行 :1 志 | 企业 壤 
国内 市 场 | 国际 市 场 | 报告 平台 | 政策 导向 | 江口 动 太 
请 胺 。 请 通 站 


三 ”2014 年 1 月 1 日 起 化 妈 出 口 关税 将 适当 降低 〈 附 实 
据 财政 部 靖 息 ， 为 军 入 嚼 彻 党 的 十 八大 各 十 八 页 三 中 全 会 精神 ， 落 实 稳 反 长 
和 居 和 关 性、 准确 性、 和 学 性 ， 保 b 


国务 院 关税 税则 委员 会 关于 2014 年 关税 实施 方案 的 


各 [20131968 海关 妆 时 : 《2014 关 我 开放 这 已 国 和 YY 
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所 功能 性 网 站 : 功能 性 网 站 是 具有 某 种 特殊 
功能 的 网 站 , 如 百度 网 站 是 专业 的 搜索 网 站 ， 
其 主要 功能 就 是 提供 搜索 服务 ; 8684 网 站 主 
要 提供 公交 信息 查询 。 

中 


省 江 小 硕 四 组 | 个 人 中 心 ”| 抽 索 设 壮 | 新 乒 首页 


Bai 癌 下 


暂 回 网 页 贴吧 知道 音乐 图 片 视频 地 图 


< 


间 : 网 站 有 分 类 ， 那 么 网 页 可 以 分 类 吗 ? 
答 : 在 网 站 中 不 同类 型 网 页 的 执行 过 程 是 不 同 的 ， 所 以 根据 网 页 的 执行 过 
程 可 将 网 页 分 为 静态 网 页 和 动态 网 页 。 其 中 静态 网 页 是 指 网 页 中 的 内 容 是 


固定 的 , 并 不 会 随 着 用 户 的 访问 而 呈现 不 同 的 内 容 , 但 静态 网 页 中 也 可 有 动态 的 元 素 (如 GIF 动画 、 
Flash 动画 、 滚 动 字幕 等 ), 但 这 些 动态 效果 只 是 视觉 上 的 , 与 动态 网 页 是 不 同 的 概念 , 一 般 情况 下 
静态 网 页 的 扩展 名 为 .htm、.html、.shtml 和 .xml; 而 动态 网 页 则 用 程序 语言 将 网 页 上 的 数据 存储 
到 数据 库 中 ， 用 户 在 访问 网 站 中 不 同 的 网 页 时 ， 会 自动 从 数据 库 中 读 取 相 应 的 数据 ， 其 网 页 内 容 
不 是 固定 的 。 动 态 网 页 可 以 在 线 更 新 ， 与 用 户 进行 交流 ， 将 用 户 提交 的 数据 存储 到 服务 器 的 数据 
库 中 ， 一 般 情况 下 ， 动 态 网 页 的 扩展 名 为 .asp、.jsp、.php、.perl 和 .cgi 等 。 


1.1.3 创建 网 站 前 的 准备 工作 


在 着 手 创建 一 个 完整 的 网 站 时 ， 应 该 为 此 网 站 购买 服务 器 空间 以 及 申请 域名 作为 备用 ， 
请 域名 的 作用 及 操作 方法 。 


下 面 将 分 别 介绍 购买 服务 器 空间 及 
1. 认识 和 购买 服务 器 空间 


快速 解读 网 站 


在 创建 网 站 前 ， 必 须 对 建立 的 网 站 所 使 用 的 服务 器 空间 进行 购买 ， 在 制作 完成 后 ， 则 可 


直接 将 网 站 放置 在 购买 的 服务 器 空间 ， 以 便于 
(1) 认识 服务 器 空间 


从 虚拟 主机 空间 : 虚拟 主机 空间 是 空间 提供 
商 提供 服务 器 主机 ， 并 安装 相应 的 服务 器 软 
件 ， 如 安装 Windows Server 2003 操作 系统 ， 
安装 好 IIS 并 进行 相应 的 配置 ， 并 规划 好 相 
应 的 站 点 数 ， 每 个 用 户 分 配 一 个 账号 并 划分 
给 每 个 账号 相应 的 空间 等 ， 因 此 同一 他 的 
虚拟 主机 服务 器 上 可 能 会 同时 存在 几 十 个 至 
上 百 个 网 站 ， 这 些 网 站 共用 这 台 服 务 器 的 
CPU、IIS 流量 等 资源 ， 因 此 虚拟 主机 在 一 定 
程度 上 讲 有 一 定 的 劣势 ， 但 因为 虚拟 主机 比 
较 便 宜 ， 配 置 管理 方便 ， 因 此 也 是 绝 大 多 数 
企业 及 个 人 用 户 的 首选 。 如 下 图 所 示 为 某 虚 
拟 主机 空间 的 部 分 配置 信息 。 


1 经 验 一 先知 


选择 服务 器 主机 时 必须 考虑 主机 所 支持 的 语言 、 


间 大 小 等 。 


(2 ) 购买 服务 器 空间 


怀 
团 


购买 服务 器 主机 的 注意 事项 


F 他 人 浏览 。 


及 务 器 空间 是 指 存放 网 站 文件 的 空间 ， 目 前 使 用 比较 多 的 是 虚拟 主机 空间 。 另 外 还 可 采 
租用 服务 器 进行 托管 ， 下 面 将 对 不 同 的 服务 器 空间 的 作用 进行 介绍 。 


人 租用 服务 器 进行 托管 : 租用 服务 器 是 指 服 
务 器 提供 商 提 供 主机 ， 用 户 通过 租用 或 购买 
这 台 主 机 ， 并 放置 在 服务 器 提供 商 的 机 房 中 
让 其 进行 托管 而 实现 网 站 的 完整 功能 。 租 用 
或 购买 服务 器 后 ， 用 户 就 拥有 这 台 服 务 器 的 
完全 配置 与 管理 权 ， 整 个 服务 器 的 CPU、IIS 
流量 等 资源 都 被 用 户 完全 占有 。 租 用 或 购买 
服务 器 通常 花费 较 大 ， 且 必须 要 有 专门 的 人 
员 进 行 全 新 的 配置 与 管理 ， 这 对 用 户 的 专业 
知识 要 求 较 高 ， 因 此 租用 或 购买 服务 器 只 适 
合 于 对 网 站 要 求 非常 高 的 用 户 ， 如 大 型 门户 
网 站 等 。 如 下 图 所 示 为 某 服务 商 提供 的 租用 
服务 器 配置 信息 。 


支持 的 数据 库 、IIS 并 发 连接 数 、 流 量 限制 、 空 


内 外 都 有 许多 提供 服务 器 空间 的 服务 商 ， 国 内 用 户 一 般 只 需 购买 国内 服务 器 空间 。 
下 面 将 讲解 在 “ 虚 机 屋 ” 网 站 提供 商 中 购买 服务 器 空间 的 方法 ， 其 具体 操作 如 下 : 
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二 让 语 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


选择 主机 类 型 


在 浏览 器 的 地 址 栏 中 输入 网 址 “http://www. 
xujiwu.com”， 按 Enter 键 ， 进 入 “ 虚 机 屋 " 
网 站 的 首页 。 


2.， 在 网 页 中 进行 登录 后 ， 在 导航 栏 中 单 击 “ 虚 
拟 主机 ”超级 链接 ， 在 弹出 的 子 导航 栏 中 单 
击 “ 双 线 主机 ”超级 链接 。 


AGE 和 确定 虚拟 主机 型 号 


查看 各 款 虚拟 主机 的 情况 ， 并 根据 自己 的 实际 情 


一 
006 。。 况 确定 购买 哪 一 款 虚 拟 主机 ， 选 择 好 后 单 击 其 后 
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AGE 0 时。 进行 虚拟 主机 配置 


根据 页 面 提示 进行 相应 操作 ， 包 括 填 写 FTP 账户 
名 、 密 码 、 购 买 年 限 等 。 完 成 后 单 击 基 天 二 二 司 


AGE 时 完成 订单 
在 打开 的 页 面 中 将 显示 提交 的 订单 信息 。 付 款 后 
就 可 正式 开通 了 。 


2. 申请 域名 


域名 即 大 家 常 说 的 网 址 ， 旭 


快速 解读 网 站 


0 百度 的 域名 为 “baidu.com”， 但 平时 大 家 一 般 是 输入 “www. 


baidu.com”， 其 中 “www” 是 主机 名 ， 而 “baidu.com” 称 为 域名 。 域 名 是 使 用 英文 字符 和 数 
字 组 成 的 ， 域 名 的 选取 非常 重要 ， 和 简短、 容易 记 忆 、 便 于 输入 、 有 一 定 的 内 涵 和 意义 等 都 是 评 
判 一 个 域名 好 坏 的 基本 标准 。 


下 面 将 介绍 在 “中 


图 


名 创 ” 网 站 中 申请 域名 的 方法 ， 其 具体 操作 如 下 : 


SEER 0 打开 网 页 


在 浏览 器 的 地 址 栏 中 输入 网 址 “http://www.63ns. 
com.cn”， 按 Enter 键 ， 进 入 “中 国名 创 ” 网 站 


的 首页 。 


本 本 本 进行 域名 查询 


1， 在 登录 账号 后 ， 在 导航 栏 右 侧 的 域名 文本 框 


中 输入 想 要 申请 的 
2， 在 文本 框 下 方 选 
选 框 。 


域名 , 如 “shuiguowang”。 
中 回 wm、 回 m 和 加 mt 复 


3. 设置 完 成 后 ， 单 击 


es 


GE BE 


中 多 声名 。 提名 放 术 条 


Dm Dom Dovemn 
De Drm 口 if 
由 么 可 。 国 网 小 。 四 中国 (cn) 


千 客 机 板 任 这 | 
全 业 于 时 兽 沈 站 入 >> 


在 打开 的 页 面 中 将 会 出 现 域名 查询 的 结果 ， 在 一 
个 没有 注册 的 域名 后 ， 单 击 “ 没 有 被 注册 ,立即 
注册 ”超级 链接 。 


二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


本 本 填写 信息 并 完成 域名 申请 


1. 填写 完 相关 的 域名 资料 后 ， 在 下 方 选中 
回 我 已 经 阅读 、 理 解 并 接受 域名 注册 协议 复 选 框 。 
2 单 击 号 EEE 按钮 ， 即 可 完成 申请 域名 操作 。 
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乾 个 星 


1.1.4 ”网 站 建设 的 流程 

建设 网 站 时 必须 了 解 其 建设 的 流程 ， 如 收集 资料 和 素材 、 规 划 站 点 等 ， 做 好 这 些 准备 工作 
后 ， 才 能 开始 正式 制作 网 页 ， 最 后 还 需 测试 站 点 并 进行 站 点 的 发 布 ， 以 及 对 发 布 的 站 点 进行 更 
新 和 维护 等 操作 。 下 面 将 分 别 进行 介绍 。 


1. 收集 资料 和 素材 aa 
在 着 手 制作 网 站 前 ， 需 收集 和 整理 与 网 ”| 


站 内 容 相关 的 文字 资料 、 图 像 和 动画 素材 等 。 
如 制作 个 人 网 站 ， 则 应 收集 个 人 简历 、 爱 好 
等 方面 的 材料 ， 如 制作 影视 网 站 ， 就 需 收集 
大 量 中 外 电影 的 信息 及 演员 资料 等 ， 如 制作 
学 校 网 站 ， 则 需要 学 校 提供 文字 材料 ， 如 学 
校 简介 、 招 生 对 象 说 明 以 及 与 学 校 有 关 的 图 
片 等 。 收 集资 料 时 应 对 各 种 资料 进行 分 类 保 
存 ， 方 便 制作 网 站 时 使 用 ( 如 右 图 为 个 性 网 
站 的 资料 及 相关 网 页 ， 此 处 是 方便 说 明 分 类 情况 才 采用 汉字 ， 用 户 在 制作 时 最 好 使 用 拼音 或 
英文 ) 。 

2. 规划 站 点 

在 创建 站 点 之 前 需要 对 站 点 进行 规划 ， 站 点 的 形式 有 并 列 、 层 次 和 网 状 等 ， 需 根据 实际 情 
况 进行 选择 。 在 规划 站 点 时 应 按 站 点 所 包含 的 内 容 进行 频道 的 划分 ， 如 要 制作 一 个 综合 性 网 站 ， 
其 包含 的 内 容 非常 多 ， 如 军事 、 文 学 、 社 会 、 时 政 、 体 育 和 情感 等 多 个 方面 ， 在 各 主 频道 下 面 
又 有 很 多 的 小 栏目 ， 各 小 栏目 下 面 又 包括 许多 的 网 页 ， 因 此 设计 网 站 时 需要 考虑 到 各 个 网 页 的 
内 容 及 版 式 。 


3. 制作 网 页 


完成 站 点 规划 后 ， 便 可 具体 到 每 一 个 页 面 的 制作 ， 在 制作 网 页 时 ， 首 先 要 做 的 就 是 设计 版 
面 布局 ， 与 传统 的 报刊 杂志 制作 一 样 ， 可 将 网 页 看 作 一 张 报纸 进行 排版 布局 。 版 面 指 的 是 在 浏 
览 器 中 看 到 的 完整 页 面 大 小 。 


4. 测试 站 点 


快速 解读 网 站 


网 页 制作 好 后 ， 并 不 能 马上 就 发 布 站 点 ， 还 需 对 站 点 进行 相应 的 测试 。 站 点 测试 可 根据 
浏览 器 种 类 、 客 户 端 以 及 网 站 大 小 等 要 求 进行 测试 ， 避 免 制作 好 的 网 站 在 不 同 的 浏览 器 中 出 现 
乱码 ， 或 在 不 同 的 计算 机 上 浏览 时 ， 其 分 辩 率 错误 等 。 一 般 测试 站 点 将 会 移 到 一 个 模拟 调试 服 


务 器 上 对 其 进行 测试 或 编辑 。 
5. 发 布 站 点 


发 布 站 点 之 前 需要 在 Internet 上 申请 一 个 


然后 将 
上 传 到 申请 的 网 址 
布 站 点 命令 进行 上 传 。 


6. 更 新 和 维护 站 点 


页 空间 , 以 指定 网 站 或 主页 在 Internet 上 的 位 置 ， 


站 的 所 有 文件 上 传 到 服务 器 空间 。 上 传 网 站 通常 使 
录 下 。 因 为 FTP 软件 上 传 文件 速度 较 快 ， 


FTP ( 远程 文件 传输 ) 软件 将 其 
也 可 使 用 Dreamweaver 中 的 发 


站 点 上 传 到 服务 器 后 ， 也 要 对 网 站 内 容 进行 及 时 更 新 ， 让 浏览 者 第 一 时 间 了 解 到 整个 网 


站 的 动态 。 而 且 网 站 在 使 


了 一 段 时 间 后 ， 也 要 进行 定期 维护 ， 避 免 页 面 元 素 显 示 不 正常 、 各 


种 超级 链接 的 链接 出 错 等 ， 从 而 影响 网 站 的 浏览 量 。 


1.1.5 ”网 站 建设 常用 的 软件 


在 制作 网 页 时 ， 并 非 只 使 用 到 网 页 制作 


款 软 件 ， 在 网 页 中 包含 了 各 种 类 型 的 元 素 ， 如 


文本 、 图 像 、 动 画 、 音 乐 以 及 视频 等 ， 这 些 元 素 都 需要 通过 专门 的 软件 进行 制作 ， 下 面 分 别 进 


行 介绍 。 
如 图 形 图 像 制作 软件 : 图 像 是 网 页 中 最 常见 


的 内 容 之 一 ， 如 Logo、 广 告 、 产 品 图 像 等 都 
是 通过 图 形 图 像 软件 制作 的 。 图 形 图 像 处 理 


软件 非常 多 ， 在 制作 网 页 时 经 常 使 用 的 软件 
是 Fireworks 和 Photoshop。Fireworks 是 专门 
的 网 页 图 像 制 作 与 处 理 软件 ，Photoshop 功能 
非常 强大 ， 可 用 其 制作 特效 图 片 等 。 


个 动画 制作 软件 : 网 页 中 支持 的 动画 格式 包 
括 GIF 动画 及 Flash 动画 两 种 ， 其 中 GIF 动 
画 可 以 使 用 Fireworks 及 Photoshop 制作 。 对 
于 Flash 动画 则 主要 使 用 Flash 进行 制作 ， 当 
然 如 果 只 想 制作 一 些 比 较 简 单 的 Flash 动画， 
也 可 选择 如 Swish 之 类 的 软件 ， 利 用 Swish 
内 置 的 各 种 特效 ， 完 全 可 以 做 出 专业 级 的 
Flash 特效 。 


可 CC CT | 
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Hour: 


二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


但 网 页 制作 软件 : 要 将 图 片 、 文 本 、 动 画 
及 其 他 媒体 整合 在 一 起 成 为 网 页 ， 可 以 使 
用 Dreamweaver 这 种 可 视 化 软件 完成 。 
Dreamweaver 能 将 文本 、 图 像 、 动 画 、 音 乐 
等 整合 在 一 起 ， 在 指定 的 位 置 显示 对 象 。 
Dreamweaver 不 仅 是 一 个 专业 的 可 视 化 网 页 
设计 编辑 工具 ， 还 是 一 个 出 色 的 网 站 管理 和 
维护 的 工具 。 它 最 大 的 特点 是 能 够 快速 创建 
各 种 静态 和 动态 网 页 ， 而 且 所 生成 的 网 页 代 
码 精 小 ， 是 一 款 难得 的 软件 。 


Ee i 
文 /4(。 篇 辑 (日 去 看 (V) 插入 修改 (M) 格式 (DO) 合 S[C) 新 占 $) 富 口 (W) 帮助 [H) 
Megasp xX ER 


源 人 


入 声名 0 三 


只 骨 1 分 名， 次 主 用 加 入 入 们 ， 即 10006 万 风 交 天 友 ， 扣 和 无 了 吉 壬 扫 空 : 


4 一 ] 6 
S18 x av LR7 1 WW Viceds IF 


| 上 机 1 小 时 | 
1 令 进 一 步 认识 网 站 域名 。 


人 得 网 页 制作 辅助 软件 : 在 网 页 制作 过 程 中 
还 有 许多 辅助 软件 ， 使 用 这 些 辅助 软件 可 
以 让 制作 过 程 更 轻松 。 例如 ， 配 色 软 件 

“ColorSchemer Studio” (如 下 图 所 示 ) 、 编 

辑 CSS 样式 的 软件 “topstyle” 、 进 行 浏览 
兼容 性 测试 的 软件 “ietester” 、CSS 网 页 菜 
单 生 成 工具 “CSS Menu Generator” 、 站 点 地 


图 生成 工具 “SiteMapBuilder”、 图 像 优 化 压 
缩 软 件 “Image Optimizer” 等 。 


申请 网 站 空间 及 域名 
进一步 掌握 申请 网 站 空间 及 域名 的 方法 。 


下 面 将 为 准备 建设 的 网 站 进行 空间 和 域名 的 申请 操作 ， 在 申请 前 ， 先 在 网 站 中 进行 注册 。 


HE 5 
1.， 在 浏览 器 地 址 栏 中 输入 “www.cnaaa.com" 


网 址 , 按 Enter 键 , 即 可 进入 “3A” 网 站 主页 。 
2.， 单 击 页 面 右上 角 的 CE 按钮 。 


9 


。 如 果 用 户 已 经 在 该 网 站 进行 了 注册 ， 
[在 该 页 面 上 直接 输入 用 户 名 和 密码 ， 单 击 


[ pe 
人 人 Eee | 2-°|* nonsnenss=. . 


A 


| Er TE | 六 用 ~ 车 棕 让 心 - 3A 网 经 用 -， x 
AGE 填写 注册 信息 站 一 
1. 根据 提示 ， 在 注册 页 面 填写 注册 信息 。 | 
2 完成 后 单 击 EEE3 按 钮 。 


本 本 完成 注册 并 登录 


1， 在 打开 的 页 面 中 显示 注册 成 功 ， 在 该 页 面 rr 
上 方 的 用 户 名 文本 框 中 输入 注册 的 用 户 名 
"lxsgw”。 人 


2. 在 密码 文本 框 中 输入 用 户 名 的 密码 。 
3. 输入 完成 后 ， 在 文本 框 后 单 击 E 赎 | 按钮 进行 


EE CNAAA 多 加 原 务 相 线 
登录 。 
0 996 3389 


7x24 守节 


62 《 
Hour: 
人 


-… 在 打开 页 面 的 导航 栏 中 选择 “域名 注册 ”选项 ， % 
EF | 。 在 弹出 的 列表 中 单 击 “英文 域名 ”超级 链接 。 个 


42 《 
Hour: 
人 


本 本 而 进行 关 文 域名 查询 € 


辐 sna ews 前 1， 在 打开 页 面 的 域名 查询 文本 框 中 输入 域名 人 
2 i 
2， 单 击 有 3EE 按 钮 
22 
Hour 
全 


Hours 
一 一 一 


AGE 最， 进行 英文 域名 注册 


1. 在 查询 域名 结果 页 面 中 ， 选 中 @dsgw.com 可 以 二 去 
单 选 按钮 ， 其 他 保持 默认 设置 。 
2 单 击 电 二 二 网 按钮 。 


寺村 信 息 


1. 在 打开 的 页 面 中 填写 注册 域名 的 相关 信息 。 
2.， 填写 完成 后 ， 单 击 节 E= 导 按钮 。 
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堆 wesw s009063 用 
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EEEEEEEEE3 


国 sns 
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la 和 CY YY eg. beson HA. 0 | 


去 限 名 及 。。” 可 SB 用 


【¢ 司 本 ng _ a 


二 让 滞 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


< pron mt) SE 


DR 


eg 


建生 注册 。。 国内 实 亲 


ds 二 二 的 所 
me 了 图。 元/ 首 生 让 65 元/ 和 
ER D518 Sz 

rns = 加 万 隔 ， [35 元 / 罕 泊 起 委 65 元 /和 


而 aasa 


@ sr 


本 名 成 功 


在 打开 的 页 面 中 提示 预 注册 成 功 ， 单 击 “ 预 注 
册 成 功 ， 马 上 付费 ”超级 链接 就 可 进行 付费 ， 
付费 完成 后 域名 就 正式 注册 成 功 了 。 


TE 申请 虚拟 主机 


在 打开 的 页 面 导航 栏 中 选择 “国内 空间 ” 选 


项 ,再 在 列表 中 单 击 “ 企 业 系列 ”超级 链接 。 
2. 在 打开 页 面 的 “门户 型 ”列表 下 单 击 革 BE 
按钮 。 


|| 


快速 解读 网 站 


EE nase 


1. 在 打开 的 页 面 中 对 虚拟 主机 的 信息 进行 配置 ， 
包括 FTP 用 户 名 、 有 效 期 限 、 机 房 等 。 


2. 完成 后 ， 单 击 吕 ER 时 开通 蝇 扩 者 而 按钮 。 


man 


本 本 看 直 看 开通 的 虚拟 主机 信息 


开通 虚拟 主机 后 ， 便 可 在 打开 的 页 面 中 看 到 所 有 
虚拟 主机 的 相关 信息 。 


Etpsg 


和 的 FTP 窗 码 是 : 29AEP66T04adbe 
ef 要 动 开 炮 的 网 址 为 : http;//Espagr is242.804. 
功 页 面 左 侧 ， 单 击 “ 孝 据 库 管理 " 超级 链接 即 | 人 re 


可 开通 数据 库 。 
"MW 


122 226 212.242 和 210.83.85 ,203 


1.2 ”网 站 开发 环境 配置 


在 进行 网 页 制作 前 ， 应 先 搭建 网 站 开发 平台 ， 一 般 是 先 安装 IS， 再 对 其 进行 配置 ， 然 后 
在 Dreamweaver CS6 中 进行 站 点 的 配置 。 


IEESEI>------ 


久 掌握 IIS 的 作用 。 久 掌握 建立 站 点 的 操作 方法 。 
熟悉 安装 IIS 的 操作 方法 。 熟悉 修改 站 点 信息 的 操作 方法 。 
和 


了 解 IIS 的 配置 方法 。 | | 


1.2.1 安装 1IS 的 作用 


IIS 是 Intemet Information Server 的 简称 ， 中 文 翻译 为 因特网 信息 服务 器 ， 是 Microsoft 公 
司 开发 的 一 款 集成 了 多 种 Internet 服务 ( 如 WWW 服务 、FTP 服务 等 ) 的 服务 器 软件 ， 其 中 
WWW 服务 即 提供 网 站 访问 的 服务 ， 而 FTP 服务 则 是 提供 网 站 文件 上 传 与 下 载 的 服务 。 
对 于 以 .htm ( 或 .html ) 为 扩展 名 的 静态 网 页 来 说 ， 可 以 直接 双击 该 网 页 图 标 在 浏览 器 中 


32 € 
Hour: 
人 


Hour: 


于 滞 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


打开 并 浏览 其 内 容 ， 不 需要 WWW 服务 器 的 支持 ， 但 对 于 以 .asp、.php、.aspx 等 为 扩展 名 的 
动态 网 页 来 说 ， 要 正常 访问 这 些 页 面 的 内 容 ， 必 须 有 WWW 服务 器 的 支持 ， 否 则 无 法 查看 网 
页 效果 。 当 双击 动态 网 页 文件 图 标 时 ， 通 常 不 能 启动 浏览 器 ， 而 是 要 求 选择 打开 方式 ， 然 后 才 


能 打开 ， 并 且 打开 时 也 只 能 查看 到 网 页 源 代 码 ， 无 法 查看 网 页 的 显示 效果 。 因 此 在 进行 


页 制 


作 前 ， 最 好 先 安装 并 配置 好 IS， 然 后 在 Dreamweaver 中 创建 好 本 地 站 点 及 测试 服务 器 后 ， 最 


后 开始 网 页 的 制作 ， 这 样 不 论 是 制作 静态 网 页 还 是 动态 网 页 ， 都 能 正常 地 进行 


1.2.2 安装 lIS 
通常 作为 专业 的 Web 服务 器 操作 系统 ， 


了 浏览 与 测试 。 


一 般 要 求 是 Windows Server 2000 或 2003 ( 因为 


其 配置 硬件 要 求 相 对 较 低 ) ， 但 在 开发 网 站 时 ， 则 可 不 受 此 限制 。Windows Server 2003 及 
Windows 7 都 自 带 有 IIS 组 件 , 但 一 般 默认 未 安装 ， 用 户 可 以 通过 操作 系统 安装 光盘 进行 安装 。 
讲解 ， 其 具体 操作 如 下 : 


下 面 以 在 Windows 7 操作 系统 中 安装 IIS 为 例 进行 


AGE 6 二 打开 “ 印 载 或 更 改 程序 ”窗口 


打开 “控制 面板 "窗口 ,在 "大 图 标 " 的 查看 方式 下 ， 
单 击 “ 程 序 和 功能 ”超级 链接 ， 打 开 “ 逢 载 或 更 
改 程序 ”窗口 。 


! 1 面板 ” 右上 角 的 “查看 方式 ”| 
下 拉 ee i et ee | 


要 本 天 安装 IS 


在 打开 窗口 的 左 侧 窗 格 中 ， 单 击 “打开 或 关 
闭 Windows 功能 " 超级 链接 , 打开 “Windows 
功能 ”对 话 框 。 

2. 在 打开 对 话 框 的 列表 框 中 选中 BB [CEIEEE3 
复 选 框 。 

3. 单 击 EEE 本 按钮 ， 即 可 进行 安装 。 


调整 计算 机 的 设置 
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快速 解读 网 站 


上 经 验 一 筹 乱 一 一 测试 是 否 成 功 安装 IIS 


安装 IIS 后， 如果 用 户 想 知道 IIS 是 否 安装 
成 功 ， 则 可 打开 浏览 器 ， 在 浏览 器 的 地 址 栏 
中 输入 “http://localhost” 网 址 , 按 Enter 键 后 ， 
如 果 安 装 成 功 ， 则 会 在 浏览 器 中 出 现 IS7 的 
图 标 , 相反 , 则 不 会 出 现 , 表明 安装 IIS 失败 。 


1.2.3 配置 |IS 


安装 好 IIS 后 ， 即 可 对 IIS 进行 相应 的 配置 ， 在 Windows 7 中 人 允许 添加 多 个 站 点 并 进行 相 
应 的 配置 。 下 面 以 配置 “默认 网 站 ”为 例 讲解 配置 IIS 的 方法 ， 其 具体 操作 如 下 : 


ls 

1. 打开 “控制 面板 ”窗口 ， 在 “大 图 标 ” 的 查 
看 方式 下 ， 单 击 “ 管 理工 具 ” 超 级 链接 。 思 window py 

2.， 在 打开 的 窗口 中 双击 “Internet 信息 服务 ( IIS ) 各 


站， 
| 如 果 用 户 双击 “管理 工具 ”超级 链接 ，| 
; 在 打开 的 窗口 中 找 不 到 “Intemet 信 息 服务 (IS) ， 
| 管理 器 ”选项 ， 可 在 安装 TIS 时 展开 “Intemet | 
| 信息 服务 ”选项 并 选中 回 驯 Asp 复 选 框 。 | 
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1 经 验 一 敌 售 一 一 设置 桌面 快捷 方式 


在 “Internet 信 息 服务 ”图 标 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 【发 送 到 】/【 桌 面 
快捷 方式 〗 命 令 ， 在 桌面 上 为 “Intemet 信息 服务 ”创建 一 个 快捷 方式 ， 以 便 以 后 配置 IS 
时 节省 时 间 。 


Hour: 


二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


打开 “虚拟 目录 ” 窗 格 


在 打开 的 窗口 中 ， 在 左 侧 窗 格 中 依次 展开 各 
选项 ,选择 “Default Web Site” 选 项 。 

2. 在 中 间 窗 格 中 选择 “ASP” 选 项 。 

3. 在 右 侧 窗 格 中 单 击 "查看 虚拟 目录 "超级 链接 。 
在 窗口 中 间 将 打开 “虚拟 目录 ” 窗 格 。 


本 丁丁 打开 “添加 虚拟 目录 ”对 话 杠 
在 打开 窗口 的 右 侧 窗 格 中 单 击 “ 添 加 电 拟 目录 ” 超 
级 链接 ， 打 开 “ 添 加 虚拟 目录 ”对 话 杠 。 
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AGE 打开 “浏览 文件 来 ”对话 杠 
在 打开 对 话 框 的 “别名 ”文本 框 中 输入 创建 网 站 


的 名 称 “huahui”。 在 “物理 路 径 ” 文 本 框 后 ， 
单 击 回 按 钮 ， 打 开 “ 浏 览 文件 来” 对 话 框 。 


本 本 完成 虚拟 目录 设置 


1. 在 打开 对 话 框 的 列表 框 中 选择 所 需 文件 夹 ， 
完成 后 ， 单 击 医 王 本 按钮， 返回 到 “添加 虚 
拟 目录 ”对 话 框 中 。 

. 在 该 对 话 框 的 “物理 路 径 ” 文 本 框 中 即 可 查 

看 到 所 选择 的 完整 路 径 ， 关 闭 对 话 框 ， 完 成 

lIS 的 配置 。 


1.2.4 建立 并 配置 站 点 
制作 网 页 之 前 必须 先 创建 站 点 ， 利 


站 点 的 管理 功能 对 站 点 中 
Dreamweaver CS6 提供 了 本 地 站 点 、 测试 站 点 和 远程 站 点 3 类 站 点 ， 其 中 本 地 信息 是 


快速 解读 网 站 


的 文件 进行 管理 或 测试 。 


户 存放 


JSP 或 PHP ) 
页 所 采 


的 语言 


常 测试 。 下 面 将 分 别 介绍 这 3 类 站 点 的 配置 方法 。 


1. 建立 并 配置 本 地 站 点 


匹配 ， 否 则 无 法 正 


页 、 素 材 等 网 站 文件 的 本 地 文件 夹 ， 对 于 网 页 设计 者 来 说 ， ip 可 。 测 试 
站 点 主要 对 动态 页 面 进行 测试 时 使 用 ， 主 要 包括 对 动态 网 页 所 采用 的 语言 
、 测 试 服务 器 文件 夹 的 设置 及 Web URL 的 配置 ， 所 选择 的 语言 必须 与 编写 动态 
致 。 另 外 ，Web URL 也 必须 与 IIS 中 对 应 站 点 的 配置 相 


(ASP、ASPNET、 


进行 网 站 制作 前 应 先 配 置 好 本 地 站 点 ， 以 方便 对 网 站 的 网 页 文档 、 图 像 、Flash 等 内 容 进 
行 管理 , 所 有 的 网 页 文档 、 图 像 及 Flash 原则 上 都 应 该 放置 在 本 地 站 点 文件 夹 中 , 如 “H:\huahui” 
文件 夹 中 。 下 面 以 配置 “huahui” 站 点 为 例 讲解 本 地 站 点 的 配置 方法 ， 其 具体 操作 如 下 : 


RE 选择 “新 建站 点 ”命令 


启动 0 CS6 后 , 选择 【 站 点 】/【 新 


建站 点 】 命 令 ， “站 点 设置 对 象 未 命名 站 
点 2” 对 话 框 。 
人 人 但 DR 
选择 【站 点 】/【 管 理 站 点 】 命 令 ， | 


i 
| 在 打开 的 对 话 框 中 单 击 [BBS | 按 钮 ， 也 可 进 
已 行 站 点 的 新 建 操作 。 


人 
AGE 配置 林地 站 点 信息 
1， 在 “站 点 名 称 ” 文 本 框 中 输入 站 点 名 称 


“huahui" 后 , 对 话 框 名 称 发 生 相应 的 变化 。 
2.， 在 “本 地 站 点 文件 夹 ”文本 框 中 输入 虚拟 目 
录 文 件 所 在 的 站 点 路 径 “H:\huahui\”。 
3. 单 击 [名 一 按钮 完成 配置 。 


“本 地 站 点 文件 夹 ” 后 的 下 径 必须 | 
全 否则 
就 不 能 使 用 IIS 的 解析 功能 对 网 页 进行 解析 ， 
并 正 党 显示 网 页 。 


经 验 一 筹 管 一 站 点 命名 规则 
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在 输入 站 点 名 称 时 尽量 使 用 英文 字母 或 数字 进行 命名 ， 最 好 不 要 包括 中 文字 符 ， 否 则 在 后 期 进 
行 网 页 制作 时 可 能 会 在 添加 对 象 时 出 错 ， 如 添加 Flash 文本 时 显示 不 出 效果 等 。 


Hour: 


让 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


2. 配置 测试 站 点 

在 进行 动态 网 站 开发 时 ， 必 须 配置 测试 站 点 ， 配 置 时 需要 确定 网 站 开发 所 使 用 的 语言 以 
及 使 用 哪个 网 址 对 动态 网 页 进行 预览 测试 等 。 下 面 以 配置 “huahui” 站 点 的 测试 站 点 为 例 讲解 
其 方法 ， 具 体操 作 如 下 : 


AS 站 


AGE 条 畏 。 编辑 当前 先 定 的 站 点 

1， 在 Dreamweaver CS6 界面 中 ， 选 择 【 站 
点 】/【 管理 站 点 】 命 令 。 

2. 打开 “管理 站 点 ”对 话 框 ， 在 列表 框 的 左 

下 角 ， 单 击 加 按钮 ， 打 开 “ 站 点 设置 对 象 

huahui” 对 话 框 。 
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本 本 准备 添 加 测试 站 点 信息 
1. 在 打开 的 对 话 框 中 选择 “服务 器 ”选项 卡 。 
2、， 在 右 侧 窗 格 的 列表 框 左下 角 ， 单 击 [按钮 。 
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AGER 0 号 配置 站 点 信息 


3 1 在 “服务 器 名 称 " 文本 框 中 输入 服务 器 名 称 。 
- 2 在 “连接 方法 ”下 拉 列 表 框 中 选择 “本 地 /网 
络 ”选项 以 便 在 本 地 进行 站 点 测试 。 


壬 坟 广 法: [本地 局 二 人 


3. 在 “服务 器 文件 夹 ”文本 框 中 输入 服务 器 文 
件 夹 的 路 径 ， 一 般 与 本 地 文件 夹 相 同 。 

4.， 在 "Web URL” 文 本 框 中 输入 访问 该 网 站 的 
网 址 “http://localhost/”。 


快速 解读 网 站 


机 配置 高 级 选项 

1， 选择 “高 级 ”选项 卡 。 

2.， 在 “服务 器 模型 ”下 拉 列 表 框 中 选择 服务 器 
模型 ， 即 采用 何 种 语言 开发 网 站 。 

3.， 单 击 [名 | 按钮 。 


AGER 055 。 完成 配置 

1 返回“ 站 点 设置 对 象 huahui” 对 话 框 ， 单 击 
本 一 | 按钮 关闭 对 话 框 。 

2.， 在 打开 的 缓存 提示 对 话 框 中 确定 更 新 缓存 ， 
再 在 打开 的 对 话 框 中 单 击 匡 酶 按钮 ， 关 闭 
对 话 框 ， 完 成 测试 站 点 的 配置 。 
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3. 配置 远程 站 点 

在 进行 动态 网 站 开发 的 过 程 中 不 用 配置 远程 站 点 ， 可 以 在 站 点 开发 并 测试 完成 后 再 进行 
配置 ， 将 本 地 站 点 与 网 站 服务 器 空间 进行 相连 ， 以 便 将 网 站 文件 上 传 到 网 站 服务 器 空间 中 ， 或 
从 网 站 服务 器 空间 中 下 载 文件 到 本 地 文件 夹 中 。 下 面 以 配置 “huahui” 的 远程 站 点 为 例 介绍 配 
置 远程 站 点 的 方法 ， 其 具体 操作 如 下 : 


ET 

1. 打开 "站 点 设置 对 象 huahui" 对 话 框 , 选择 " 服 
务 器 ”选项 卡 。 

2. 在 右 侧 窗 格 的 列表 框 左下 角 ， 单 击 此 ] 按 钮 。 


二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


AGE 配置 服务 器 


1. 在 “服务 器 名 称 ”文本 框 中 输入 服务 器 名 称 。 

2. 在 "连接 方法 ”下拉 列 表 框 中 选择 "FTP" 选 项。 

3. 在 “FTP 地 址 ”文本 框 中 输入 FTP 服务 器 的 
IP 地 址 ， 或 上 传 网 址 。 

4.， 在 “用 户 名 ”及 “密码 ”文本 框 中 输入 用 户 
名 及 密码 。 


本 本 机。 测试 连接 

1 单 击 [二 按 包 进行 连接 测试 。 

2.， 如 果 连 接 成 功 会 打开 提示 对 话 框 ， 单 击 
[本 本 按钮 关闭 对 话 框 。 
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EE 完成 配置 

1. 在 “ 根 目 录 ” 文 本 框 中 输入 服务 器 空间 中 站 
点 的 根 目录 。 

2.， 单 击 [一 够 | 按钮 关闭 对 话 框 。 


申请 好 网 站 服务 器 空间 后 ， 在 服务 
器 提供 商 的 网 站 上 可 以 查询 到 上 传 空间 的 用 户 ， 
| 名、 密码 及 于 地 址 等 ， 一 般 允许 用 户 进行 密 | 
| 码 修改 。 | 


国有 于 NE 配置 开发 环境 


久 进 一 步 巩 固 IIS 的 配置 方法 。 


久 进一步 掌握 建立 并 配置 站 点 的 各 种 方法 。 


I 
1 ” 令 进 一 步 掌握 IIS 虚拟 目录 的 配置 方法 。 咱 | 


本 次 实例 将 为 “超级 水 果 王 ” 网 站 项 目 配置 开发 环境 , 配置 时 与 前 面 的 操作 方法 稍 有 不 同 ， 
即 不 会 在 IIS 中 配置 默认 站 点 ， 而 是 以 虚拟 目录 的 方式 进行 配置 。 


本 本 打开 信 息 服 务 管理 器 窗口 


在 H 盘 根 目 录 下 创建 “cjsgw" 文件 夹 。 在 桌面 上 ， 
双击 “Internet 信息 服务 ( IIS ) 管理 器 ”图 标 杷 ， 
打开 “Internet 信息 服务 (IIS ) 管理 器 ”窗口 。 


本本、 7 开 “添加 虚拟 目录 ”对 话 框 
在 展开 的 “默认 网 站 ”选项 上 单 击 鼠 标 右键 ， 在 弹 
出 的 快捷 菜单 中 选择 “添加 虚拟 目录 ”命令 ， 打 开 
“添加 虚拟 目录 ”对 话 框 。 
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AGE 6 晴 。 设置 虚拟 目录 别名 与 物理 路 径 
1.， 在 “别名 ”文本 框 中 输入 “cjsgw”。 
2. 在 “物理 路 径 ” 文本 中 输入 路 径 “H:\ 


cjsgw”。 


3. 完成 后 , 单 击 基 和 本 按钮 , 关闭 对 话 框 及 窗口 。 


AGE 选择 “新 建站 点 ”命令 


在 Dreamweaver CS6 主 界面 中 ， 选 择 【 站 点 】/ 
【新 建站 点 ] 命令 , 打开 “站 点 设置 对 象 未 命名 2” 
对 话 框 。 


Hour: 


二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


本 天 “ 渤 择 根 目录 ”对 话 框 

1， 在 "站 点 名 称 " 文 本 框 中 输入 站 点 名 称 
“cjsgw”。 

2， 在 “本 地 站 点 文件 来" 文本 框 后 ， 单 击 “ 济 
此 文件 闪 ” 按钮 回 ， 便 可 打开 “选择 根 文件 交 " 
对 话 框 。 


i 选择 根 目 录 文 件 夹 


在 打开 的 对 话 框 中 选择 虚拟 目录 文件 所 在 的 
文件 路 径 。 

2. 找到 并 选择 其 本 地 网 站 所 在 的 文件 夹 。 

3， 单 击 医 琶 ga 本 按钮 ， i 
击 医 加 @a 按 钮 ， 返 回 到 “站 点 设置 对 象 
cjsgw” 对 话 框 中 。 


Opa 
名 本 | 局 疏 昌 其 = 
最 返 过 站 的 四 ”三 2013 秋 舌尖 2013/12/17 16:59 
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2014/W2 16:57 
2013/10/8 919 
2013/12/19 17:57 
2013/12/17 1431 
2013/1Y28 11:52 
2013/11/12 12:24 
2013/9/30 1558 


“(8] 单 十)” 


机 添加 测试 服务 器 


1.， 选 择 “服务 器 ”选项 卡 。 
2. 在 右 侧 窗 格 的 列表 框 左下 角 单 击 [于 | 按钮 。 


机 二 服务 吕 

1.， 在 “服务 器 名 称 ”文本 框 中 输入 服务 器 名 称 
“djsgw" 。 

2 在 “连接 方法 * 下拉 列 表 框 中 选择 “本 地 /网 
络 " 选项 。 

3， 在 “服务 器 文件 夹 " 文本 框 中 输入 虚拟 目录 
所 在 文件 夹 的 路 径 ， 其 余 保持 默认 设置 。 


wi 配置 测试 服务 器 高 级 属性 


选择 “高 级 ”选项 卡 。 

2.， 在 “服务 器 模型 ”下 拉 列 表 框 中 选择 开发 网 
站 所 使 用 的 语言 “ASP VBScript”。 

3.， 单 击 [_ 铝 | 按钮， 关闭 对 话 框 。 


a 


返回 到 “站 点 设置 对 象 cjsgw” 对 话 框 中 ， 单 击 
区 全 按钮 ， 关 闭 对 话 框 ， 完 成 所 有 配置 。 


人 全 
站 直人 如 果 要 在 本 地 进行 FTP 上 传 与 下 载 
| 测试 ， 可 以 先 在 IIS 中 配置 好 FTP 服务器， 再 
| 在 Dreamweaver 中 配置 远程 站 点 信息 ， 以 实现 


| .上传 与 下 载 操作 。 


1.3 练习 1 小 时 


1 
| 
| 
| 
| 

后 


快速 解读 网 站 


本 章 主 要 让 用 户 对 网 站 和 网 页 有 个 基本 概念 ， 并 讲解 了 一 些 制作 网 站 前 的 准备 及 流程 ， 如 
购买 服务 器 及 申请 网 站 空间 ， 也 对 动态 网 站 的 开发 环境 配置 及 安装 IIS 进行 了 详细 的 讲解 ， 为 
以 后 制作 网 站 做 了 一 个 很 好 的 铺垫 。 为 了 让 用 户 能 更 好 地 掌握 所 讲 知识 ， 下 面 就 以 “建设 网 站 
前 的 准备 工作 ”和 “创建 并 配置 sgswl 站 点 ”为 例 进行 练习 ， 从 而 进一步 熟练 制作 网 站 前 的 所 


有 准备 操作 。 


(个 ”建设 网 站 前 的 准备 工作 


访问 域名 ， 查 看 虚拟 主机 是 否 开通 。 


本 例 将 为 制作 网 站 做 好 准备 工作 ， 其 主要 包括 申请 域名 sg5123.com 和 购买 虚拟 主机 空 
间 等 。 其 方法 为 :首先 通过 浏览 器 进行 购买 虚拟 服务 器 的 网 站 ， 在 打开 的 网 站 中 注册 成 》 
会 员 ， 再 查询 国际 英文 域名 sg5123.com， 如 果 该 域名 未 被 注册 ， 则 申请 注册 ， 如 果 已 注册 ， 
则 尝试 其 他 域名 进行 注册 , 最 后 选择 虚拟 主机 并 查看 其 具体 配置 、 价 格 等 , 进行 综合 考虑 后 ， 
申请 适合 的 虚拟 主机 ， 再 付费 完成 域名 的 注册 和 虚拟 主机 的 购买 。 完 成 


后 ， 可 通过 浏览 器 


二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


(人 ”创建 并 配置 sgw1 站 点 


本 例 将 为 动态 网 站 开发 做 好 准备 工作 ， 即 创建 并 配置 站 点 。 在 创建 站 点 前 应 先 对 站 点 
进行 规划 ， 如 网 站 的 名 称 ， 本 地 站 点 文件 夹 的 位 置 、 卫 地址、 默认 文档 等 。 首 先 在 D 盘 创 
建 本 地 站 点 文件 夹 “sgw5123”， 启 动 Intemet 信息 服务 ( IIS ) 管理 器 ， 在 “Default Web 
Site” 项 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “属性 ”命令 ， 在 打开 对 话 框 的 “网 站 ” 
选项 卡 “IP 地 址 ”下 拉 列 表 框 中 输入 “127.0.0.1”， 并 在 “ 主 目录 ”选项 卡 的 “本 地 路 径 ” 
文本 框 中 输入 “D:sgw5123”。 然 后 在 “文档 ”选项 卡 中 配置 默认 文档 ， 并 删除 多 余 的 文档 。 
最 后 启动 Dreamweaver CS6， 配 置 本 地 站 点 及 服务 器 ， 注 意 配置 服务 器 时 ，“Web URL” 文 
本 框 中 应 输入 “http://127.0.0.1”。 


ee 
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制作 简单 绚丽 的 网 页 让 


学 习 了 小 时 ;@ 网 页 制作 的 基本 操作 
eeposososesoesseseessoessesosoesssoessscsseop DO 不 元 
对 使 用 Dreamweaver CS6 制作 网 页 的 基础 地 Ee 页 
知识 有 了 一 定 的 了 解 后 ， 即 可 启动 Dreamweaver 。 
CS6， 熟 悉 其 工作 界面 并 掌握 基本 的 操作 方法 ， : 
包括 新 建 、 保 存 、 打 开 、 关 闭 网 页 等 ; 然后 添加 : 全 时 
需要 的 元 素来 填充 网 页 内 容 ， 如 文本 、 图 片 和 超 。 
级 链接 ; 根据 需要 还 可 以 使 用 CSS 美化 网 页 中 的 。 
内 容 ， 使 网 页 效果 更 加 美观 。 


上 机 小 时 


二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


网 页 制作 的 基本 操作 


2 


了 解 网 站 和 网 页 的 基本 知识 后 ， 还 需要 了 解 制作 网 页 的 软件 Dreamweaver CS6， 并 掌握 


一 些 制 作 网 页 的 基本 操作 ， 如 打开 、 关 闭 、 保 存 以 及 网 页 
Dreamweaver CS6 的 界 
行 介绍 。 


BEE 


a 了 解 Dreamweaver CS6 的 操作 界 盏 
建 并 保存 网 页 文档 的 操作 方法 。 


、 创 建 并 保存 网 页 、 


纺 掌握 创 


打开 并 关闭 网 页 文档 以 及 页 面 属性 设置 的 方法 进 


属性 设置 等 。 下 面 将 对 


久 掌握 打开 并 关闭 网 页 的 操作 方法 。 


忆 掌 握 设置 页 画 


属性 的 操作 方法 。 


2.1:1 


菜单 栏 


文档 编 


下 面 将 


如 标题 栏 : ， We 守 生 剂 杠 出 可 过 是 口 显示 模式 ， 


认识 Dreamweaver CS6 的 操作 界面 
在 启动 Dreamweaver CS6 后 ， 展 


标题 栏 、 、 浮 动 面板 和 “属性 ” 


这 体 网 格局 


Business Catalyst Bl 作 
| css 过 理 允 曲面 上 


jQuery Movike 色 板 
PhomeGap Buid 面 板 


户 面 前 的 是 网 页 设计 的 主 界面 ， 该 界面 主要 包括 


板 。 


默认 为 “设计 器 ”， 而 最 右 侧 


的 窗口 控制 按钮 可 对 窗口 进行 最 小 化 、 最 大 化 /恢复 和 关闭 操作 。 


人 菜单 栏 : 


菜单 栏 中 集合 了 几乎 所 有 Dreamweaver 操作 的 命令 ， 通 
窗口 设置 及 网 页 制作 的 各 种 操作 。 


过 各 项 命令 ， 可 以 完成 


制作 简单 绚丽 的 网 页 区 过 二 


如 文档 编辑 窗口 : 是 Dreamweaver 的 主要 部 分 ， 当 打开 网 页 文档 进行 编辑 时 ， 在 文档 编辑 
窗口 中 显示 编辑 的 文档 内 容 。 

得 欢迎 屏幕 : 启动 Dreamweaver 时 会 在 文档 编辑 窗口 前 方 显示 欢迎 屏幕 ， 通 过 该 屏幕 用 户 
可 快速 打开 最 近 打 开 过 的 文档 ， 也 可 快速 创建 各 种 类 型 的 文档 。 

如 浮动 面板 : 浮动 面板 是 停靠 在 编辑 窗口 右 侧 的 各 种 设置 和 快捷 操作 的 集合 ， 用 户 可 自 定义 
某 些 功能 是 否 在 浮动 面板 中 显示 。 

内 “属性 ”面板 : “属性 ”面板 位 于 Dreamweaver CS6 窗口 底部 ， 在 编辑 网 页 文档 时 ， 主 
要 用 于 设置 和 查看 所 选 对 象 的 各 种 属性 。 不 同 网 页 对 象 ， 其 “属性 ”面板 的 参数 设置 项 目 
也 不 同 ， 如 下 图 所 示 为 文本 “属性 ”面板 。 


情 式 加 ) [元 区 一 一 EE -7 
DD 无 贷 接 中 i 目标 的) 
| 5 响 目 


[ee | 


2.1.2 创建 并 保存 网 页 文档 


在 Dreamweaver CS6 中 可 以 创建 空白 网 页 文档 ， 也 可 以 通过 Dreamweaver 内 置 的 模板 文 
档 创建 具有 一 定 内 容 及 样式 的 网 页 文档 ， 对 创建 的 网 页 进行 编辑 后 ， 还 可 将 其 进行 保存 ， 以 避 
免 数 据 丢 失 。 下 面 将 分 别 介绍 创建 和 保存 网 页 文档 的 操作 方法 。 


1. 创建 网 页 文档 

创建 网 页 文档 的 方法 比较 简单 ， 和 一 般 软 件 一 样 都 可 通过 启动 Dreamweaver CS6 软件 后 ， 
选择 【文件 ]/[ 新 建 ] 命令 , 打开 “新 建文 档 ” 对 话 框 ， 选择 “空白 页 ” 选项 卡 , 在 “页面 类 型 ” 
列表 框 和 "布局 "列表 框 中 选择 合适 的 类 型 , 单 击 攻 三 gg 本 按钮 , 即 可 创建 一 个 新 的 空 自 网 页 文档 ， 
也 可 直接 单 击 欢迎 屏幕 中 “新 建 ” 栏 的 选项 快速 新 建文 件 。 


入 析 的 再 
[eb 


四 ie 


一 筹 能 一 一 快速 创建 网 页 文档 


启动 Dreamweaver CS6 后 ， 直 接 按 CtrlHN 组 合 键 ， 便 可 快速 地 创建 空白 的 网 页 文档 。 


2. 保存 网 页 文档 
在 Dreamweaver 中 对 文档 进行 编辑 后 , 需 对 文档 进行 保存 。 其 方法 为 : 选择 [ 文件 ]/[ 保存 】 


Hour: 


证 习 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


命令 ,打开 “另存 为 ”对 话 框 ， 在 “保存 在 ” 
下 拉 列 表 框 中 选择 保存 位 置 ， 在 “文件 名 ” 
下 拉 列 表 框 中 输入 文件 名 ， 击 攻 钴 名 
按钮 即 可 对 网 页 进行 保存 。 


和 经 验 一 筹 管 一 一 快速 保存 网 页 


首次 保存 文档 后 ， 在 编辑 网 页 过 程 中 可 随 jj 章 击 ) 
时 按 Ctrl+S 组 合 键 进行 网 页 的 保存 ， 以 免 办 = EE 
因 停 电 、 误 操作 等 原因 造成 一 些 不 必要 的 保存 类 型 外; [A Docoments thtn# hinshinw vm] | 取消 | 
损失 。 


micelle 标准 化 表单 四。 5 哎 范 分 解 ， 后 陆 范 辣 成 ) - [BR 
加 包括 Vnieods 签名 Co) G) | 


2.1.3 ”打开 并 关闭 网 页 文档 


当 需 要 对 电脑 中 的 网 页 文档 进行 查看 和 编辑 时 ， 可 以 在 Dreamweaver CS6 窗口 中 打开 。 

待 编辑 并 保存 后 ， 将 其 关闭 。 下 面 将 分 别 介绍 打开 和 关闭 网 页 文档 的 操作 方法 。 

个 打开 网 页 文档 : 如 果 是 经 常 打开 的 文档 ， 可 在 欢迎 屏幕 的 “打开 最 近 的 项 目 ” 栏 中 单 击 需 

要 打开 的 网 页 文档 将 其 打开 ; 如 果 是 没有 打开 或 很 久 没有 打开 过 的 文档 则 可 通过 选择 【 文 

件 】/【 打 开 】 命 令 或 按 CtrltO 组 合 键 ， 打 开 “ 打 开 ” 对 话 框 ， 在 该 对 话 框 中 找到 并 选中 
需要 打开 的 网 页 文档 ， 单 击 基 #@ 辐 按钮 ， 将 其 打开 。 
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如 关闭 网 页 文档 : 单 击 菜单 栏 下 方 网 页 文档 名 称 右 侧 的 国 按 钮 ， 便 可 关闭 当前 正在 编辑 的 网 
页 文档 。 


2.1.4 设置 页 面 属 性 


对 网 页 页 面 进行 页 面 属 性 设置 是 比较 重要 的 ， 页 面 属性 设置 包括 外 观 、 链 接 、 标 题 、 标 题 / 
编码 等 。 在 Dreamweaver CS6 中 可 通过 两 种 方法 设置 页 面 对 象 ， 一 种 是 使 用 CSS ( 即 在 对 话 框 
中 选择 CSS 外 观 则 会 自动 产生 CSS 属性 设置 代码 ) ; 另 一 种 是 使 用 HTML 代码 实现 ， 不 管 是 
使 用 哪 种 方法 ， 最 终 效 果 相同 。 在 实际 设置 过 程 中 ， 应 优先 使 用 CSS 方式 实现 ， 以 便 能 应 
到 其 他 网 页 ， 以 统一 整个 网 站 的 外 观 。 
下 面 以 设置 “main.html” 网 页 的 页 面 属 性 为 例 ， 对 网 页 的 整个 外 观 进行 设置 ， 如 链接 、 
页 面 字体 、 背 景 颜色 、 边 距 、 标 题 等 。 其 具体 操作 如 下 : 


制作 简单 绚丽 的 网 页 


AGE 晴 。 设 置 外 观 


1， 打 开 “main.html” 网 页 ， 按 F8 键 ， 打开 “ 属 


性 ”面板 ， 单 击 马 页 本 本 攻 一 了 按钮， 打开 “页 
面 属性 ”对 话 框 。 

2.， 在 打开 对 话 框 中 的 “分 类 ”列表 框 中 选择 “外 
观 (CSS ) ”选项 。 

3.， 在 右 侧 窗 格 中 分 别 将 “文本 颜色 ”和 “背景 
颜色 ”设置 为 “#FFF” 和 “#1A98D5”。 


| 
| 


| 
| 


CD [Cm] 


本 本 设 圭 镍 接 属性 


1.， 在 "分 类 ” 列表 框 中 选择 “链接 ( CSS ) " 选项 。 ey sa GTJ 用 于 

2.， 在 右 侧 窗 格 中 分 别 将 “链接 颜色 ”、“ 变 换 3 选择 
图 像 链接 ”、“ 已 访问 链接 ”和 “活动 链接 " Re 
设置 为 “#1682B6” 、"#E45B43”、"#E45B43” 


和 "#1A98D5”。 
3.， 在 "下划线 样式 ”下 拉 列 表 框 中 选择 “始终 
无 下 划 线 ”选项 。 


丁丁 古 设 置 标题 及 编码 


sno 果 如 下 图 所 示 。 


ke g 了 
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1 经 验 一 筹 能 一 一 “标题 / 编码 ”选项 卡 


1.， 在 “分 类 ”列表 框 中 选择 “标题 /编码 ”选项 。 
2. 在 右 侧 窗 格 中 进行 标题 及 编码 的 设置 。 
3. 单 击 加 可 于 按钮， 完成 页 面 属性 的 设置 ， 效 


在 “页 面 属性 ”对 话 框 中 ， 最 难 理解 的 也 许 就 是 “标题 / 编码 ”选项 卡 中 的 各 参数 ， 下 面 分 别 
对 这 些 参数 的 含义 进行 介绍 。 
所 标题 是 指 浏览 网 页 时 ， 在 地 址 栏 后 的 文本 框 中 显示 的 网 页 标题 。 
人 文档 类 型 : 是 指 编辑 的 网 页 所 使 用 语言 的 版 本 ， 如 HIML 5、HTML 1.0 等 。 
介 编码 : 是 指 网 页 制作 完成 后 ， 在 浏览 器 中 是 使 用 哪 种 语言 显示 ， 如 楷体 GB2 
从 Unicode 标准 化 表单 : 在 不 同 浏览 器 中 表单 显示 的 兼容 性 。 


312、UTF-8 等 。 


Hour: 


让 习 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CSs6 版 ) 


荐 目 EN 创建 index.html 网 页 


忆 进一步 熟悉 Dreamweaver CS6 操作 界面 。 信 进一步 掌握 页 面 属性 的 设置 方法 。 


1 进一步 恋 新 建 和 保存 网 页 的 操作 方法 。 | 


下 面 将 使 用 Dreamweaver CS6 创建 一 个 index.html 网 页 ， 让 用 户 更 加 熟悉 创建 和 保存 网 页 
的 操作 方法 ， 并 对 创建 的 网 页 进行 页 面 属性 设置 其 最 终 效果 如 下 图 所 示 。 


| 
| | EWsersW PADesktop\ 宙 加重 7 富 Vndexlindexchtml prt 


| 


AAAEE 6 二 新 建 空白 HTML 网 页 文档 画 | 


文件 (有 妨 吃 (Ej 可 寺 [V) 插入 四 。” 炸 改 (M) 堆 式 (0) 过 二 (O。 六 襄 ($) 罕 口 WW) 帮 了 (HI) 
启动 Dreamweaver CS6， 在 欢迎 屏幕 的 “新 建 ” 
栏 中 选择 “HTML” 选 项 ， 进 入 编辑 网 页 界面 。 
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要 保存 网 页 文档 


制作 简单 绚丽 的 网 页 


选择 【文件 ]/【 保存 ] 命令, 打开 “另存 为 ”Ue 
对 话 框 。 em Re Fo 
2.， 在 打开 的 对 话 框 中 选择 保存 路 径 ， 这 里 选择 人 | 
“桌面 ”选项 。 Sr ee 
3， 在 "文件 名 "文本 框 中 输入 文件 名 称 "index" ， gx 《人 移 择 )wev 
其 余 保持 默认 设置 。 Er 2 
4 单 击 Egg 按钮 ， 完 成 保存 设置 。 本 
另 夺 为 模板 (M)- 
目 生 至 = 次 为 大 万 fR) 
在 四 EEELS a 
Es k sy Pi | 


保存 类 型 [All Documents Cui hunlin sh 取消 


Teade 检定 化 表单 加。 5 《 撕 划 分 角 ， 后 有 拔节 襄 咏 ) 
a teicods ES OO 


机 二 性 


在 属性 面板 中 ， 单 击 EREEE= ae 按钮， 打开 “页 
面 属性 ”对 话 框 。 


Er 


ry 4 栖 : 亲王 半 


I 设置 外 观 效果 


在 打开 对 话 框 的 “分 类 ”列表 框 中 选择 “外 
观 (CSS ) ”选项 。 

2. 将“ 页面 字体 ”设置 为 “Georgia, Times 
New Roman, Times, serif”。 

3. 分 别 将 “大 小 ”和 “文本 颜色 ”设置 为 “12” 
和 "#333”。 

4. 在 “背景 图 像 ” 文 本 框 后 单 击 EBBEE:a 按 钮 。 


42 < 
Hour: 
人 


本 设置 背景 图 像 


在 打开 对 话 框 的 “查找 范围 ”下 拉 列 表 框 中 


选择 图 像 存放 的 路 径 。 

2.， 在 路 径 位 置 下 选择 需要 设置 的 背景 图 像 。 

3 单 击 医 枉 本 按钮 ， 返 回 到 “页 面 属性 ”对 话 
框 中 。 


032 STEP 06: 设置 链接 效果 
1 在 "分 类 " 列表 框 中 选择 "链接 ( CSS ) " 选项 。 
Hs 2， 分 别 将 “链接 颜色 ”、“ 变 换 图 像 链 接 ”、 


“已 访问 链接 ”和 “活动 链接 ”颜色 设置 为 


“#333” ~、"#f3300” 、"#333" 和 "##f3300" 。 
3， 在 “下划线 样式 ”下 拉 列 表 框 中 选择 “始终 
无 下 划 线 ”选项 。 
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EE 设置 标 是 

1.， 在 “分 类 ”列表 框 中 选择 “标题 /编码 ”选项 。 

2.， 在 “标题 ”文本 框 中 输入 标题 “被 囚禁 的 幻 
想 一 自由 网 ” 

3 单 击 匡 台 到 按钮 ， 完 成 页 面 属性 设置 。 


wi 预览 并 关闭 网 页 文档 


按 Ctrl+S 组 合 键 ， 将 设置 的 操作 进行 保存 ， 
在 窗口 中 单 击 力 按钮 ， 对 设置 后 的 网 页 进行 
预览 。 
2. 完成 预览 后 ， 单 击 网 页 文档 右 侧 的 辆 按钮 ， 
将 其 关闭 。 
3. 在 窗口 右上 角 单 击 “ 关 闭 ” 按 钮 Cx ]， 退 出 


Dreamweaver CS6。 


制作 简单 绚丽 的 网 页 
2.2 添加 网 页 元 素 


一 张 完整 的 网 页 是 由 文本 、 图 片 、 链 接 、 动 画 等 多 种 不 同 的 元 素 组 成 的 ， 因 此 要 使 网 页 给 
人 以 新 鲜 、 绚 丽 的 视觉 冲击 ， 必 须 在 网 页 中 添加 适合 该 网 页 的 各 种 元 素 。 下 面 将 讲解 在 网 页 中 
添加 文本 、 图 像 、 超 级 链接 以 及 一 些 动态 元 素 的 作用 及 操作 方法 。 


EEE------ 
了解 在 网 页 中 添加 文本 的 操作 方法 。 , 掌握 超级 链接 的 使 用 。 


@ 掌握 添加 图 像 的 操作 方法 。 | 


2.2.1 为 网 页 添加 文本 


文本 是 网 页 中 最 常见 、 运 用 最 广泛 的 网 页 元 素 之 一 ， 在 网 页 中 插入 文本 ( 一 般 文本 、 空 格 、 
水 平 线 、 日 期 、 项 目 列表 、 编 号 列表 、 特 殊 符 号 、 换 行 符 和 分 段 符 等 ) 与 在 Word 等 文字 处 理 
软件 中 添加 文本 一 样 方便 ， 用 户 可 以 使 用 不 同 的 方法 为 网 页 添加 文本 及 其 他 相关 内 容 。 下 面 将 
分 别 介绍 不 同文 本 的 添加 方法 。 

1. 添加 一 般 的 文本 


在 Dreamweaver 中 添加 普通 文本 的 方法 很 简单 ， 可 以 直接 在 页 面 中 进行 文本 输入 ， 还 可 
以 从 其 他 文档 复制 和 粘贴 文本 。 下 面 将 分 别 介绍 其 操作 方法 。 


户 直接 输入 文本 : 在 网 页 文档 编辑 区 中 ， 将 ”从 复制 粘贴 文本 : 在 其 他 包含 文本 的 文档 中 
和 鼠标 光标 定位 在 需 添加 文本 的 位 置 ， 切 换 到 ”选中 所 需 复 制 的 文本 ， 按 CtrltC 组 合 键 ， 
所 需 的 输入 法 即 可 进行 文本 的 输入 。 将 文本 插入 点 定位 到 网 页 文档 编辑 区 中 ， 按 


CtrltV 组 合 键 进行 粘贴 即 可 。 
i 
1 为 2. 火 3. 哦 (ktrt) 4. 噢 (ktmd) 5. 嘱 (kngf) 6. 呵 


间 : 在 网 页 文档 中 可 以 导入 其 他 软件 的 文本 吗 ? 
答 : 就 输入 文本 而 言 ， Ta 
Dreamweaver CS6 和 


其 他 办 公 软 件 一 样 ， 都 可 以 将 其 他 软件 中 
的 文本 导入 到 网 页 文档 中 ， 其 方法 为 : 将 
插入 点 定位 到 需要 导入 文本 的 位 置 ， 选 择 
【文件 】/【 导 入 】 命 令 ， 在 弹出 的 下 拉 列 
表 中 选择 需要 导入 文件 的 类 型 ， 如 Excel、 
XML 或 Word 等 。 在 打开 的 对 话 框 中 选择 


其 导入 到 网 页 文档 中 。 


基于 ed RC) 


二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


2. 添加 空格 
在 网 页 制作 过 程 中 ， 如 果 要 添加 空格 ， 则 不 能 像 在 Word 等 文档 中 那样 ， 只 需 按 Space 
键 即 可 ， 但 在 网 页 制作 中 ， 不 管用 户 按 多 少 次 Space 键 都 只 会 出 现 一 个 空格 符 ， 这 是 因为 
Dreamweaver 中 的 文档 格式 都 是 以 HIML 的 形式 存在 ， 而 HTML 文档 只 允许 字符 之 间 包 含 一 
个 空格 。 下 面 将 介绍 几 种 在 网 页 中 添加 空格 的 操作 方法 : 

各 选择 【窗口 】〗/【 插 入 】〗】 命 令 ， 打 开 “ 插 入 ”面板 ， 在 “常用 ”下 拉 列 表 框 中 选择 “文本 ” 
选项 ， 切 换 到 “文本 ”插入 栏 ， 在 插入 列表 中 选择 “已 编排 格式 ”选项 ， 然 后 在 文档 中 连 
续 按 Space 键 即 可 。 

介 选 择 【插入 〗】/【HTML]/【 特 殊 字符 】/【 不 换行 空格 】 命 令 可 添加 一 个 空格 ， 如 果 需 要 
添加 多 个 空格 ， 重 复 操作 即 可 。 

如 按 Ctrl+tShifttSpace 组 合 键 可 输入 一 个 空格 ， 如 果 需 要 多 个 ， 重 复 操作 即 可 。 

所 将 中 文 输入 法 切换 到 全 角 状 态 (通常 按 ShifttSpace 组 合 键 可 以 进行 全 、 半 角 状 态 切换 ) ， 
直接 按 Space 键 ， 需 要 多 少 个 空格 就 按 多 少 次 Space 键 。 

人 四 切换 到 代码 视图 ， 在 需要 输入 空格 的 位 置 输入 “&nbsp;”， 即 可 代表 一 个 空格 ， 连 续 输 入 
可 输入 多 个 空格 。 


3. 添加 水 平 线 


在 网 页 中 ， 水 平 线 可 让 网 页 中 的 信息 看 。 gga 
起 来 更 有 层次 感 ， 也 可 对 文本 和 其 他 对 象 进 


行 分 隔 。 其 方法 为 ， 将 鼠标 光标 定位 到 需 添 Ee el gm 5 
加 水 平 线 的 位 置 ， 选 择 【插入 】/ 【HIML】/ 


【 水 平 线 】 命令 ， 即 可 添加 水 平 线 。 


‖ 经 验 一 筹 管 一 一 设置 水 平 线 


用 户 不 仅 可 添加 水 平 线 ， 还 可 以 对 添加 的 水 平 线 进行 设置 ， 在 “属性 ”面板 的 “ 宽 ” 和 “高 ” 
数值 框 中 可 设置 水 平 线 的 宽度 和 高 度 值 ; 在 “对 齐 ” 下 拉 列 表 框 中 可 设置 水 平 线 的 对 齐 方式 ， 
如 “ 左 对 齐 ”、“ 居 中 对 齐 ” 和 “ 右 对 齐 ” 等 。 


4. 添加 项 目 列表 
项 目 列表 是 具有 平等 关系 的 列表 ， 其 排序 是 可 以 不 分 先后 顺序 的 。 在 Dreamweaver 中 添 
加 项 目 列表 非常 简单 ， 只 需要 先 创建 好 要 设置 为 项 目 列表 的 段落 文本 , 每 个 项 目 项 为 一 个 段落 ， 
在 “属性 ”面板 中 单 击 且 按钮 即 可 。 


《>》 mt] | 粘 式 虽 [下 ™ 类 元 -En 

Bcss 型 加 无 ~ 负 拉 中 

国 芭 : 水 平 CI[EHNA_ 7] 宽 内 | ] 不 横行 o) 口 ] 
EE. ”| 高 史 | 吾 大 是 5 癌 


让 ”电话 : 028-67811566 


5. 添加 编号 列表 
编号 列表 是 有 一 定 先后 顺序 的 列表 ， 其 排序 是 必须 区 分 先后 顺序 的 。 在 Dreamweaver 中 


xX 


制作 简单 绚丽 的 网 页 


要 添加 编号 列表 ， 只 需要 先 创建 好 要 设置 为 编号 列表 的 段落 文本 ， 每 个 编号 项 为 一 个 段落 ， 然 
后 在 “属性 ”面板 中 单 击 轿 按 钮 ， 或 选择 【格式 】 /【 列表 】/【 编号 列表 】 命 令 ， 数 字 前 导 字 


列表 创建 。 


符 将 出 现在 鼠标 光标 前 ， 在 数字 前 导 字符 后 输入 相应 的 文本 ， 按 Enter 键 换行 后 ， 下 一 个 数字 
前 导 字符 将 自动 出 现 ， 继 续 输入 其 他 列表 项 ， 完 成 整个 列表 的 创建 后 按 两 次 Enter 键 即 可 结束 
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2.2.2 在 网 页 中 添加 图 像 
在 网 页 中 适当 添加 一 些 图 像 ， 可 以 让 网 页 更 美观 漂亮 。 在 网 页 中 可 以 添加 扩展 名 为 jpg、 


.8 下 及 .png 格式 的 图 像 。 下 面 


1. 添加 图 像 
在 网 页 中 添加 图 像 时 ， 先 使 用 Photoshop 或 Fireworks 等 专业 处 理 图 像 软件 制作 好 图 像 ， 
然后 将 其 保存 在 站 点 中 的 某 个 文件 夹 中 ， 即 可 在 网 页 中 添加 图 像 。 下 面 以 在 “pic.html” 网 页 
人 绍 其 方法 ， 


介绍 


介绍 添加 图 像 与 设置 图 像 属性 的 方法 。 


其 具体 操作 如 下 : 


fm 

将 素材 图 像 “banner.jpg” 保 存在 素材 网 页 “pic. 
html” 相 同 的 文件 夹 或 其 下 的 文件 夹 中 ， 并 在 
Dreamweaver CS6 中 打开 素材 网 页 。 


选择 图 像 源 文件 


选择 【插入 】/[【 图 像 】 命令 ， 

像 源 文件 ”对 话 框 。 
2.， 在 “查找 范围 ”下 拉 列 表 框 

位 置 的 路 径 ， 选 择 素材 图 像 。 
3 单 击 EEBE 按钮 。 
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二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


AGE 最， 设置 图 像 标 答 


1. 打开 "图 像 标 签 辅助 功能 属性 " 对 话 框 , 在 " 蔡 
换文 本 ”对 话 框 中 输入 “年 度 返利 ”。 

2， 单 击 匡 且 汪 按钮， 返回 到 网 页 制作 页 面 中 ， 
即 可 查看 到 插入 的 图 像 。 


Dw EE 二 = es 
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在 “图 像 标签 辅助 功能 属性 ”对 话 框 的 “替换 文本 ”下 拉 列 表 框 中 输入 插入 图 像 的 替换 文本 ， 
输入 后 ， 图 像 在 没 显示 的 情况 下 则 会 显示 输入 的 替换 文本 。 


2. 设置 图 像 属性 

在 网 页 中 插入 图 像 后 ， 有 时 还 需要 对 图 像 进行 命名 、 设 置 图 像 大 小 、 修 改 源 文件 、 设 置 图 
像 说 明 等 操作 ， 这 些 功 能 是 可 以 通过 设置 图 像 的 属性 来 实现 的 。 选 择 图 像 后， 在 图 像 “ 属 性 ” 
面板 中 即 可 进行 图 像 属 性 的 设置 。 


[TI ~ et 区 天 - m 
rn rr en = 
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下 面 将 分 别 介绍 “属性 ”面板 中 部 分 参数 的 含义 。 

如 “ID” 文 本 框 : 用 于 为 图 像 进行 命名 ， 以 便 使 用 脚本 时 对 其 进行 控制 或 通过 定义 CSS 样 
式 来 改变 图 像 的 显示 。 

人 咎 “ 宽 ” 和 “高 ”数值 框 : 用 于 设置 图 像 的 大 小 ， 默 认 度量 单位 为 像素 。 单 击 右 侧 的 加 按钮 ， 
使 其 变 为 图 状 态 ， 将 约束 图 像 的 宽 和 高 的 比例 。 当 编辑 窗口 中 的 图 像 大 小 与 原始 图 像 大 小 
不 一 致 时 ， 将 在 文本 框 右 侧 显示 图 图 标 ， 单 击 该 图 标 将 恢复 图 像 的 原始 大 小 。 

咎 “ 源 文件 ”文本 框 : 设置 图 像 文件 的 位 置 ， 如 果 要 用 新 图 像 替换 原始 图 像 ， 在 “ 源 文 件 ” 
文本 框 中 重新 输入 要 插入 图 像 的 位 置 或 单 击 其 后 的 图 按钮 ， 在 打开 的 “选择 图 像 源 文件 ” 
对 话 框 中 重新 选择 其 他 图 像 即 可 。 

如 “替换 ”下 拉 列 表 框 : 用 于 设置 图 像 的 简短 描述 文本 。 在 浏览 该 网 页 时 ， 当 鼠标 光标 移动 
到 图 像 上 ， 或 不 能 正常 显示 图 像 时 会 显示 该 文本 。 

人 图 按钮 : 用 于 调整 图 片 的 明暗 度 ,， 单 击 该 按钮 ， 将 打开 “亮度 /对比度 ”对 话 框 。 拖 动 “ 亮 
度 ” 滑 块 可 调整 图 像 的 明 瞳 度 ， 拖 动 “对 比 度 ” 滑 块 可 调整 图 像 的 对 比 度 。 若 选中 加 晤 览 
复 选 框 ， 则 在 调节 明暗 度 和 对 比 度 时 可 直观 地 看 到 页 面 中 图 像 的 变化 效果 。 

人 得 回 按 钮 : 用 于 进行 图 像 裁 切 。 选 中 需 裁 切 的 图 像 后 ， 单 击 “ 属 性 ”面板 中 的 图 按钮 ， 图 像 
将 出 现 阴影 边框 ， 将 鼠标 光标 移 至 图 像 边 缘 ， 当 光标 变 为 ?、oe、% 或 中 形 状 时 拖 动 鼠标 ， 
阴影 部 分 的 面积 将 会 增 大 ， 拖 动 至 合适 大 小 时 释放 鼠标， 完成 裁 切 范围 的 设置 。 最 后 再 单 
击 该 按钮 ， 阴 影 部 分 的 图 像 即 被 裁剪 掉 。 


制作 简单 绚丽 的 网 页 车 迪 型 


筹 盘 一 和 矩形 热点 工具 


在 “属性 ”面板 上 使 用 矩形 热点 工具 可 以 绘制 矩形 、 圆 形 和 多 边 形 的 热 
点 区 域 ， 在 同一 张 图 像 中 可 添加 多 种 热点 区 域 ， 并 创建 独立 的 链接 。 


3. 创建 鼠标 经 过 图 像 
将 鼠标 光标 移动 到 图 像 上 时 ， 


加 多 YY 


会 显示 出 另外 一 幅 图 像 ， 将 鼠标 移出 时 ， 图 像 则 恢复 为 原始 


图 像 的 效果 即 为 鼠标 经 过 图 像 时 的 效果 。 鼠 标 经 过 图 像 由 原始 图 像 和 鼠标 经 过 图 像 组 成 , 因此 ， 
创建 鼠标 经 过 图 像 时 最 好 先 准备 好 两 张大 小 相同 的 图 像 。 

下 面 将 在 “tx.html” 网 页 中 进行 
体操 作 如 下 : 


设置 ， 当 鼠标 经 过 插入 的 图 像 时 ， 变 为 另 一 张 图 像 。 其 具 


本 本 本 准 各 插入 风 标 经 过 图 像 


在 Dreamweaver CS6 中 打开 “tx.html”， 将 鼠 
标 光标 定位 到 要 插入 鼠标 经 过 图 像 的 位 置 ， 选 择 
【插入 】/【 图像 对 象 】 /【 鼠标 经 过 图 像 ] 命令 ， 

打开 “插入 鼠标 经 过 图 像 ”对 话 框 。 


一 
强人 插入 鼠标 经 过 图 像 ， 就 是 在 浏览 网 ， 
页 时 ， 当 忆 标 指向 该 图 像 后 所 变化 的 图 像 ， | 


CeltAR+A 


[2 上 EE7T Hienta no | 
下 
《mu | | 格 臣 0) 区 站 ETTT 


”口上 


AGEE 8， 选择 原始 图 像 


1， 在 “原始 图 像 ”文本 框 后 ， 单 击 EBE 本 按钮 ， 
打开 “原始 图 像 ” 对 话 框 。 

2. 在 “查找 范围 ”下 拉 列 表 框 中 选择 图 像 存 在 
路 径 位 置 。 在 下 方 的 列表 框 中 选择 需要 的 图 
像 ， 这 里 选择 “1.gif” 选 项 。 

3. 单 击 匡 枉 本 按钮 ， 返 回 “ 插 入 鼠标 经 过 图 像 ” 

对 话 框 。 
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0 吉 个 从 可 

站 到 坟 二 了 原始 国 像 后 ， 将 会 在 “ 原 
| 始 图 像 ”文本 框 中 显示 图 像 的 名 称 ， 也 可 以 说 | 
| 是 一 种 相对 路 径 。 | 
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脱光 和 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


本 本 古寺 择 鼠 标 经 过 图 像 


1 


和 


在 “鼠标 经 过 图 像 ” 文本 框 后 ， 单 击 国 年 河 
按钮 。 

在 打开 的 对 话 框 中 使 用 相同 的 方法 选择 
"2.jpg” 图 像 返回 “插入 鼠标 经 过 图 像 ” 
对 话 框 。 

在 “替换 文本 ”文本 框 中 输入 文本 “好 好 学 习 
天 天 向 上 ”。 

在 “ 按 下 时 ， 前 往 的 URL” 文 本 框 中 输入 链 
接 网 址 “http://qq5163.com/xuexi.html”。 

单 击 匡 酶 本 按钮 ， 返 回 到 网 页 的 工作 界面 。 


AGER 04。。 预览 效果 
按 F12 键 ， 进 入 浏览 器 中 预览 原始 效果 ， 再 将 鼠 
标 移 到 图 像 上 查看 设置 图 表 经 过 图 像 的 效果 。 
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位 一 筹 乱 一 “插入 鼠标 经 过 


寺 话 框 中 的 各 参数 含义 


在 “图 像 名 称 ” 文 本 框 中 可 输入 图 像 的 名 称 ; 在 “原始 图 像 ” 文 本 框 中 可 以 设置 原始 图 像 ， 即 
打开 网 页 时 所 看 到 图 像 ; 在 “鼠标 经 过 图 像 ”文本 框 中 可 设置 鼠标 经 过 图 像 ， 即 鼠标 光标 移 
动 到 图 像 上 时 显示 的 图 像 ; 在 “替换 文本 ”文本 框 中 可 输入 替换 文本 ; 在 “ 按 下 时 ， 前 往 的 
URL” 文 本 框 中 可 输入 单 击 图 像 时 要 打开 的 网 页 路 径 及 名 称 。 


2.2.3 ”使 用 超级 链接 


时 会 打 玫 
接 的 路 径 分 类 ， 以 避免 在 设置 链接 时 


要 让 网 站 中 的 各 个 网 页 相互 链接 起 来 ， 可 以 创建 超级 链接 。 用 
F 新 的 网 页 ， 这 样 的 文本 及 图 像 可 称 为 超级 链接 。 但 在 创建 超级 链接 前 先 应 了 解 超级 链 
错 ， 从 而 导致 网 页 显示 出 错 。 下 面 将 分 别 介绍 超级 链接 


的 主要 分 类 。 
人 绝对 链接 : 绝对 链接 用 于 创建 站 外 的 具有 固定 地 址 的 链接 , 如 在 网 页 中 创建 的 友情 链接 等 。 
用 户 在 创建 此 类 链接 时 ， 需 要 给 出 目标 端点 (超级 链接 由 源 端 点 和 目标 端点 两 部 分 组 成 ) 

的 完整 的 URL 地 址 ， 如 http://www.google.com.。 


户 平时 单 


击 一 些 文本 或 图 像 


制作 简单 绚丽 的 网 页 


经 验 一 敌 优 一 一 链接 组 成 的 含义 


超级 链接 中 链接 的 一 端 称 为 链接 的 源 端 点 
Google ( 即 单 击 的 文本 或 图 像 ) ， 单 击 对 象 时 跳 

转 到 的 另 一 个 网 页 页 面 则 称 为 链接 的 目标 
端点 。 


© 


oocgle 扫 村。 于 下 入 


如 文档 的 相对 路 径 : 文档 相对 路 径 是 站 点 内 最 常用 的 链接 形式 ， 它 是 使 用 当前 网 页 所 在 的 位 
置 作为 参照 物 ， 其 他 网 页 是 相对 于 该 参照 物 的 位 置 所 创建 的 。 如 左 图 站 点 结构 ， 并 且 在 路 
径 中 有 可 能 使 用 到 的 /、./ 和 ../ 表 示 的 含义 不 同 。 


日 加 站 点 - nyseit Ot\... 


i 和 [ 源 端 点 目标 站 点 正确 链接 说 明 
index. htnl 
9 support | feostim ones 在 同一 文件 夫 下 拉 镑 接 
hours. htnl | 
中 cortents. html Bn 本 呈 | shan。 入 接 子 文件 夹 中 
日- resources | 
tips. htnl [ecotents am nder toms /index html 链接 到 上 一 级 文件 夹 中 
日 - 留 produets | 上 
catalog htnl (corents html caralog btml prodnetseatalog hem 随 近 和 点 作 织 训 作 天 中 
人 站 点 根 目录 的 相对 路 径 ， 站 点 根 目录 的 相对 路 径 也 是 站 点 内 常用 的 一 种 链接 形式 ， 不 过 
它 的 参照 物 是 站 点 根 目 录 。 如 “D:\mysite\help\help.html”， 网 页 要 链接 到 “D:\mysite\ 
companyVieshao.html” 网 页 ， 则 应 写 为 “\companyWieshao.html” 。 


1 经 验 一 连接 路 径 的 注意 事项 


在 进行 本 网 站 以 外 的 网 页 链接 时 ， 需 输入 完 
整 的 URL 地 址 ， 如 链接 网 易 首 页 ， 需 输入 

链接 完整 的 网 址 “http://www.163.com/”， a i a 
而 不 能 输入 “www.163.com”， 如 果 输 入 | 下 

“www.163.com”， 系 统 会 认为 是 链接 站 点 | 
内 的 “www.163.com” 文 件 ， 而 无 法 链接 正 | 网易 Nerenae [a sa een, 
确 的 网 址 。 
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WA CE 英超 。 视频 奖 讯 近世 纪实 手机 移动 手机 奈 
志 曙 电视 二 乐 。 女人 对 尚 关 眉 司 数码 害 电 笔记 本 


2.2.4 创建 链接 

一 般 情 况 下 ， 超 级 链接 可 分 为 普通 链接 、 错 链接 和 邮件 链接 等 。 不 同 的 链接 类 型 ， 其 创建 
方法 也 不 尽 相同 ， 下 面 将 分 别 介绍 在 网 页 中 创建 常用 链接 的 方法 。 

1. 创建 普通 链接 

文本 和 图 像 都 可 以 创建 普通 链接 ， 并 且 都 可 以 通过 “属性 ”面板 进行 设置 ， 下 面 将 分 别 对 
其 进行 介绍 。 


让 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


从 文本 普通 链接 : 在 网 页 编辑 区 中 选择 需要 
进行 链接 的 文本 ， 在 “属性 ”面板 的 “链接 ” 
下 拉 列 表 框 中 输入 链接 路 径 ， 在 “目标 ”下 
拉 列 表 框 中 选择 打开 目标 网 页 的 方式 。 


Dw 


和 经 验 一 敌 管 一 一 快速 创建 链接 


所 图 像 普通 链接 : 在 网 页 编辑 区 中 选择 图 像 
后 ， 在 “属性 ”面板 的 “链接 ”文本 框 中 输 
入 链接 路 径 ， 在 “目标 ”下 拉 列 表 框 中 选择 
打开 目标 网 页 的 方式 。 


Dw EF 
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在 网 页 制作 中 ， 除 了 在 “链接 ”文本 框 中 输入 链接 路 径 ， 还 可 以 直接 拖 动 文 本 框 后 的 芒 按 钮 ( 按 
住 鼠 标 左 键 不 放 ) ， 移 动 鼠 标 至 目标 链接 上 ( 在 拖 动 鼠标 时 ， 会 出 现 一 个 箭头 符号 的 线 ) ， 释 
放 鼠 标 左 键 即 可 ， 但 此 用 法 必须 是 在 目标 链接 已 经 在 “文件 ”面板 中 。 还 可 以 单 击 “ 浏 览 ” 按 
钮 回 ， 在 打开 的 对 话 框 中 找到 要 链接 的 目标 内 容 进 行 链接 


2. 创建 锚 链 接 


使 用 锚 链接 可 以 实现 在 源 文档 与 目标 文档 之 间 快 速 跳 转 ， 一 般 


在 网 页 页 面 太 长 ， 拖 动 


滑动 条 又 难以 定位 的 情况 。 锚 链接 的 创建 分 为 设置 锚 点 和 添加 锚 链 接 两 部 分 。 下 面 以 在 “mjlj. 


html” 网 页 中 添加 错 链接 为 例 介 


绍 创建 错 链接 的 方法 ， 其 具体 操作 如 下 


机 本 设计 链接 

1. 打开 “mjlj.html” 素 材 网 页 ， 并 选择 要 设置 锚 
链接 的 文本 ， 如 “客户 服务 专员 ”。 

2.， 在 "属性 "面板 的 "链接 "下 拉 列 表 框 中 输入 "#"” 
及 锚 名 称 ， 如 “#A”。 

3. 在 "目标 ”下 拉 列 表 框 中 选择 打开 方式 。 


| 
1 
| 
| 
| 
| 
| 
| 
| 
| 
| 
| 
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| 
加 


| ”进行 锚 链接 创建 时 ， 可 以 先 创建 错 ， 
再 创建 锚 链 接 ， 也 可 以 先 创建 锚 链 接 ， 后 创 
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EE en 
a i 和 i RM) 证 SO 二 SC 站 点 (9 窗口 (W) 和 (HI 
1.， 将 鼠标 光标 定位 到 要 添加 锚 的 位 置 。 EO 
区 ~ sD 
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IIM) 
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pk = em 并 ne nicode UTR-8] 
相 式 0) [标本 en 
ma 了 
Damn 8 三 
i Dw El: 
本 本 二 绩 名 称 ET 
1. 打开 “命名 锚 记 ”对 话 框 ， 在“ 锚 记 名 称 ED TE 
文本 框 中 输入 锚 记 名 称 。 客服 部 客户 服务 专员 i 
2.， 单 击 珀 琵 瑟 按钮 完成 锚 链 接 的 添加 。 二 
2、 执行 公 : [ 
- i “Ti” 性 站 建议 日 
如 
4 客服 部 客户 服务 专员 
“内 他 拓 达 
和 A TN 
了 :a | 开展 人 的 要 户 由 用 
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PR 
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3 全 信守 兴 Rtn 
3、 区 栋 使 用 办 公鸡 件 及 计算 仙 课 作 ， 打 这 度 快 ， 
4、 待人 痕 情 而 心 ， 有 镁 强 的 沟通 及 坦 角 能力， 善于 说 服 ， 应 支 能 力 强 ， 


3. 创建 邮件 链接 

邮件 链接 是 指 单 击 链接 文本 后 ， 可 以 启动 默认 邮件 客户 端 软件 进行 邮件 发 送 的 链接 。 其 操 
作 方法 与 普通 链接 的 创建 方法 相似 ， 唯 一 不 同 的 是 ， 邮 件 链接 所 选择 的 文本 是 按 邮件 格式 输入 
的 。 具 体 的 操作 方法 这 里 就 不 再 熬 述 。 
2.2.5 插入 动态 元 素 

在 网 页 文档 中 除了 可 使 用 超级 链接 外 ， 还 可 以 在 网 页 中 添加 一 些 动态 元 素 ， 如 Flash 动画 、 
音乐 及 视频 等 具有 极 强 吸引 力 的 多 媒体 文件 。 

1. 插入 Flash 动画 

在 网 页 文档 中 插入 Flash 动画 的 过 程 比较 简单 ， 并 且 在 插入 Flash 动画 后 ， 还 可 以 对 其 进 
行 相应 的 设置 。 

下 面 将 以 在 一 个 空白 网 页 中 插入 “logo.swf”Flash 动画 为 例 介绍 插入 Flash 动画 的 方法 ， 
其 具体 操作 如 下 : 


32 《 
Hour: 
从 


Hour 


AGE 亲 昌 打开 “选择 SWF” 对 话 柱 

1. 新 建 HTML 网 页 ， 将 插入 点 定位 到 空白 处 。 

2， 选择 [ 插入 ]/[ 媒体 ]/[ SWF ] 命 令 , 打开 “ 先 
择 SWF” 对 话 框 。 


SEE 选择 Flash 动画 


1.， 在 打开 对 话 框 的 “查找 范围 ”下 拉 列 表 框 中 
选择 Flash 所 在 路 径 。 

2. 在 下 方 列表 框 中 选中 需要 的 Flash 文件 。 

3， 单 击 ER 按钮 。 
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让 语 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


EE rs 

1. 在 打开 对 话 框 的 “标题 ”文本 框 中 输入 “网 
页 LOGO”" 。 

2.， 单 击 ERE 按钮， 完成 Flash 动画 的 插入 操 
作 。 


本 设置 属性 

1.， 保持 插入 Flash 的 选中 状态 ， 在 “属性 ” 面 
板 “ 宽 ”和 “高 ”数值 框 中 设置 大 小 。 

2.， 在 “Wmode” 下 拉 列 表 框 中 选择 模式 ， 这 里 
选择 “透明 ”选项 ， 让 Flash 背景 透明 。 


a 


在 “属性 ”面板 中 ， 单 击 医 三 蕴 示 = 按钮 ， 将 会 在 
网 页 编辑 区 中 查看 到 插入 的 Flash 效果 。 


2. 插入 Flash FLV 视频 


插入 扩展 名 为 .flv 的 Flash 视频 文件 的 操作 
视频 后 还 可 通过 设置 的 控制 按钮 来 控制 视频 的 播 


放 


制作 简单 绚丽 的 网 页 


下 面 将 新 建 一 个 HTML 的 空白 网 页 ， 在 该 


司 插入 Flash 动画 的 方法 类 似 ， 寺 


f 且 插入 Flash 


页 中 插入 一 个 Flash 视频 文件 ， 


具体 操作 


In 


本 本 可 准 各 插入 Flash FLV 


1. 新建 一 个 HTML 空白 网 页 , 并 将 其 保存 为 “flv. 
html”。 

2.， 将 鼠标 光标 定位 到 要 插入 Flash FLV 视频 的 
位 置 。 

3， 选择 [ 插入 ]/[ 媒体 ]/[ FLV ] 命 令 , 打开 “ 插 
入 FLV” 对 话 框 。 
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机 二 小 
1.， 在 “URL” 文本 框 中 输入 FLV 文件 名 称 。 


2 单 击 [本 区 人 J 按钮， 便 可 在 “宽度 ”和 “高 度 ” 
数值 框 中 显示 FLV 文件 的 大 小 。 


让 , 果 用 户 不 知道 FLV 文件 的 名 称 ， i 
则 可 单 击 [ 国 配 本 按钮 ， 在 打开 的 对 话 框 中 进行 ， 
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二 计 滞 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


本 本 设 轩 播放 方式 


1.， 在 打开 的 对 话 框 中 ， 选 中 回 划 53 和 回 让 有 洪 


复 选 框 。 ER 
2 单 击 世 醋 加 按钮 ,完成 Flash FLV 视 频 的 添加 。 ry] 
pl 
并 坷 加 要 站 克 比 
nv tr | ™ Eo 
| 测 FEV 文件 的 大 小 、 播 放 方式 ， 还 可 设置 视 ， EOF) 
| 频 的 类 型 ( 流 视 频 ) 和 外 观 。 | 轩 。 二 和 大 请 在 中 页面。 
ONCE 本 
en A re 
人 《 动 王 


返回 到 网 页 编辑 区 中 , 按 Ctrl+S 组 合 键 进行 保存 ， 
按 F12 键 进行 预览 。 


i ee 
| a 还 可 在 | 
| “属性 ” 面板 中 对 其 属性 进行 重新 设置 。 | 


= SI Sse Ses" 


3. 插入 视频 
在 网 页 中 也 可 以 插入 非 FLV 视频 文件 ， 其 方法 与 插入 Flash 视频 基本 相似 ， 其 方法 为 : 在 
网 页 编辑 区 中 , 将 插入 点 定位 到 需要 插入 视频 文件 的 位 置 , 选择 【 插入 ]/[ 媒体 ]/【 插件 命令 ， 
打开 “选择 文件 ”对 话 框 ， 选 择 需要 插入 的 视频 ， 将 其 插入 即 可 。 在 “属性 ”面板 中 同样 可 以 
设置 插入 视频 的 属性 参数 ， 如 通过 插件 插入 的 mpg 视频 文件 ， 默 认 大 小 为 32 x 32 像素 ， 与 实 
际 视频 的 尺寸 是 不 一 致 的 ， 因 此 必须 在 “属性 ”面板 中 手动 设置 其 大 小 。 如 下 图 所 示 为 在 网 页 
中 插入 视频 的 方法 。 


适 择 文件 各自: 加 文 全 系统 EF 
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在 站 点 定义 中 更改 黑 认 的 弹 挂 ii 二 v 
要 全 用 比 和 而， 清 保 人 文人 


一 筹 优 一 一 制作 视频 


用 户 可 以 使 用 数码 摄像 机 、 数 码 相机 或 手机 等 进行 视频 的 拍摄 ， 然 后 使 用 Premiere、 会 声 会 影 
等 软件 对 其 进行 编辑 修改 。 


制作 简单 绚丽 的 网 页 攻 


4. 添加 背景 音乐 
在 网 页 中 添加 背景 音乐 后 ， 进 行 预览 时 ， 该 网 页 的 背景 音乐 则 会 自动 播放 ， 而 完全 不 会 影 
响 浏览 者 的 操作 。 


下 面 将 新 建 一 个 HTML 空白 网 页 ， 并 使 用 标签 的 方法 为 新 建 的 网 页 添加 背景 音乐 ， 其 具 
体操 作 如 下 : 


i 
1.， 新 建 一 个 HTML 的 空白 网 页 ， 并 将 其 保存 为 
“sound.html”。 


2.， 选择 [ 插入 ]/[ 标签 ] 命 令 , 打开 "标签 选择 器 ” 045 
对 话 框 。 
72 口 


VSTEP02: - 选择 “bgsound” 选 项 

1. 在 左 侧 选择 [ HTML 标签 ]/[ 页 面 元 素 ] 选 项 。 
2. 在 右 侧 的 列表 框 中 选择 “bgsound” 选 项 。 

3， 单 击 Eee 按钮 。 


5 | pe " 源 ” a 32 《 

besomd - 常规 乐 的 路 径 及 名 称 “sound.wma”。 

| rmd) 输 A) = 2， 在 “循环 ”下 拉 列 表 框 中 选择 “(-1)” 选 

厂 国 -Cj 到 局 项 使 其 循环 播放 。 
2 3 单 击 匡 酉 加 按钮 ， 关 闭 对 话 框 。 


Hour: 


最 后 将 会 在 网 页 中 设置 超级 链接 ， 从 而 提高 


72 小 时 精通 上 让 二 


ISTER 04: 


在 “标签 选择 器 ”对 话 框 中 ， 单 击 EBs5 司 按钮 即 
完成 背景 音乐 的 添加 。 保 存 网 页 并 预览 ， 打 开 网 
页 即 可 听 到 背景 音乐 


新 和 的 首 时 音乐 没有 什么 标志 ,四 
此 只 能 在 预览 时 听 其 声 

关闭 吕 
有 制作 “Game.html” 网 页 


进一步 熟悉 超级 链接 的 使 用 方法 。 


进一步 掌握 动态 元 素 的 插入 方法 。 中 


本 例 将 在 “Game.html” 网 页 中 插入 logo 图 


像 ,并 添加 一 个 视频 插件 , 让 整个 网 页 更 加 完整 ， 


下 图 所 示 。 


户 对 所 学 知识 的 熟悉 度 和 操作 能 力 ， 最 终 效 果 如 


BLACK O 


游戏 名 称 


使 命 召唤 ， 黑 色 行动 英文 名 称 : Call of Duty: Black Ops a 称 射 击 
box360\ 


游戏 制作 :Treyarch 游戏 发 ision 游戏 平 


市 时 间 : 2014 年 3 月 9 日 


个 名 称 为 Studies 
极 、 古 
瞳 关 等 不 可 


制作 简单 绚丽 的 网 页 


本 丁丁。 准备 选择 图 像 


1， 在 Dreamweaver CS6 中 打开 网 页 “Game. 


html”。 
2.， 将 鼠标 光标 定位 到 


像 源 文件 ”对 话 框 。 


选择 图 像 


“游戏 名 称 ” 
3.， 选择 【 插入】/[【 图 像 】 命令， 打开 “选择 图 


上 方 。 


在 “查找 范围 ”下 拉 列 表 框 中 选择 图 像 所 在 
的 路 径 位 置 。 
2.， 在 下 方 的 列表 框 中 选择 需要 插入 的 图 像 。 


3， 单 击 匡 绽 晤 按钮 ， 打 开 “ 图 像 标签 辅助 功能 


属性 ”对 话 框 。 
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在 打开 的 对 话 框 中 直接 单 击 EEBNEa 按 钮 ， 返 回 到 
网 页 编辑 区 中 即 可 查看 到 插入 图 像 的 效果 。 


性 换文 本 
详细 沿 明 httPi77 


加 入 在 播 入 对 条 时 不 划 输 入 此 储 息 ， 耻 更 改 括 且 功 


ER 时。 打开 “选择 文件 对话 框 

将 鼠标 光标 定位 到 网 页 中 间 的 空白 处 ， 选 择 【 插 
入 】/ 人 媒体] 人 插件 ] 命令 ， 打 开 “ 选 择 文件 ” 

对 话 杠 。 
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让 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


ws 选择 插入 的 插件 视频 


在 “查找 范围 ”下 拉 列 表 框 中 选择 视频 插入 
Ee PEE 
所 在 的 路 径 位 置 。 和 = Ty me 
2. 在 下 方 的 列表 框 中 选择 需要 插入 的 插件 视频 TEN 3 
文件 ， Ep 
3， 单 击 世 配 本 按钮， 返回 到 网 页 编辑 区 中 便 可 
查看 到 插件 的 图 标记。 l GJ 章 盏 
人 = 
‘STEP 06: — 设置 插件 的 属性 ee 注 急 IE) 喜 看 (Y) 插入 (DD 赵 改 (M) ma CS) 人 
1， 保持 插件 的 选中 状态 ， 在 “属性 ”面板 中 ， 六 一 一 一 一 一 一 
分 别 将 其 " 宽 " 和 "高 " 设置 为 “500" 和 “330"， | | 分 Lr ] 本。 哆 .| 轧 - 史 PT 已 林 ， 条 
按 Enter 键 改变 其 大 小 再 ) 
外 预测 在 A Di Ctrl+Shift+F12 
2， 单 击 “ 在 浏览 器 中 进行 预览 /调试 ”按钮 殴 ) La 
在 弹出 的 下 拉 列 表 中 选择 “预览 在 IExplore” 汉 


选项 。 


已 
边民 四 


] 口 qt 术 wmBw | 
[Ce Tm 


® 二 


AGER 07 二 查看 预览 效果 


打开 IE 浏览 器 ， 如 果 弹 出 限制 控件 运行 


cupUTY 则 在 提示 上 单 击 CSGES5EA | 按钮 即 可 。 


BLACK OPS 


| 拆 分 | 六 FS 和 下 者 司 内 中 4 吉村 


单 击 [ 严 本 按钮 ， 切 换 网 页 编辑 器 中 ， 

“更 多 游戏 ……”。 

2.， 在 “属性 ”面板 中 单 击 匡 RE 
开 “ 页 面 属性 ”对 话 框 。 


Se = 6 1 FE/ 1 入 cea M7-6) 


EEC 全 =] 大 were ez 


五 co 无 加 


行 的 提示 ， 


Wi 打开 “页 面 属性 ”对 话 框 


选中 文本 


按钮 ， 打 


制作 简单 绚丽 的 网 页 


本 wi we monn se 

1.， 在 打开 对 话 框 的 “分 类 ”列表 框 中 选择 “ 链 本 ws 
接 ( CSS ) ”选项 。 

2. 在 "链接 颜色 ”文本 框 中 输入 颜色 值 


“#FFFF56” 。 es 汪 和 站 
3 在 “已 访问 链接 ”文本 框 中 输入 颜色 值 rita ET 


(4) 选 择 ) 
“#CF9"” 。 TE 


4.， 在 “下 划 线 样式 ”列表 框 中 选择 “变换 图 像 
时 隐藏 下 划 线 ” a 
5 单 击 左 副本 按钮 ， 返 回 到 网 页 编辑 中 


应 用 


o 


wi 输入 链接 网 址 i 


在 “属性 " 面板 的 "链接 ”文本 框 中 输入 单 
击 “ 更 多 游戏 …… ”文本 链接 的 网 址 “http:// 
www.17173.com”。 
2.， 单 击 网 页 的 其 他 位 置 ， 结 束 网 址 的 输入 。 保 
存 后 ， 按 F12 键 进行 预览 。 


2.3 使 用 CSS 美化 网 页 


在 页 面 中 添加 了 各 种 元 素 后 ， 便 可 对 相应 的 元 素 进行 一 定 美化 ， 如 文本 的 字体 、 字 号 、 背 
景 及 图 像 的 边框 等 ， 使 整个 网 页 看 起 来 更 加 美观 。 对 网 页 进行 美化 可 使 用 CSS， 下 面 介 绍 其 美 
化 方法 。 


ONES ------ 


BQ、 了 解 什么 是 CSS 样式 表 。 驴 熟悉 选择 器 的 使 用 方法 。 
1 ”熟悉 创建 CSS 样式 表 的 操作 方法 。 QB 熟悉 CSS 样式 的 属性 设置。 
用 


了解 引用 CSS 样式 的 操作 方法 。 中 | | 


2.3.1 什么 是 CSS 样式 表 


CSS 样式 表 即 层 亚 样式 表 ， 是 Cascading Style Sheets 的 缩写 ， 是 一 种 用 来 进行 网 页 风格 设 
计 的 样式 表 技 术 。Dreamweaver CS6 中 CSS 样式 表 主 要 包括 类 CSS 样式 、ID CSS 样式 、 标 签 
CSS 样式 及 复合 内 容 CSS 样式 4 种 方式 ， 下 面 分 别 进行 介绍 。 
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二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


人 旭 类 CSS 样式 : 可 以 对 任何 标签 进行 样式 

定义 ， 是 较 常用 的 定义 方式 .。 最 显著 的 特征 
是 其 名 称 前 有 “.”， 需 要 手动 对 对 象 应 用 样 
式 ， 且 只 会 影响 到 应 用 了 该 样式 的 对 象 ， 同 
时 ， 类 CSS 样式 可 以 同时 应 用 于 多 个 对 象 。 


.七 Op 
{ 
border:1px #396; 

height:210px; 
width:7TOO0px; 
margin-left:150px; 


所 标签 CSS 样式 : 可 以 对 特定 标签 进行 样式 
定义 ， 其 显著 特征 是 该 类 样式 会 自动 为 该 标 
签 的 所 有 对 象 应 用 样式 。 如 对 “<font>” 标 
签 进行 标签 CSS 样式 定义 , 则 所 有 在 “<font>” 
与 “</font>” 标 签 间 的 文本 会 自动 应 用 该 样 
式 的 效果 。 


font-size:18px; 
color:#FF6; 


font-weight:bold; 


font-family:" 方 正大 黑 简 体 "; 


一 筹 管 一 一 ID CSS 样式 的 定义 


所 ID CSS 样式 : 网 页 中 大 部 分 对 象 都 具有 
ID 属性 ， 且 在 同一 个 网 页 中 ， 原 则 上 了 JID 名 
称 是 不 能 相同 的 ，ID CSS 样式 就 是 针对 某 个 
具有 特定 ID 名 称 的 对 象 进行 样式 定义 ， 即 
ID CSS 样式 不 能 应 用 于 多 个 对 象 ， 而 是 自动 
应 用 到 具有 该 ID 名 称 的 对 象 上 。 


#top 

{ 
border:1px #396; 
height:210px; 


width:7OO0px; 
margin-left:150px; 


人 复合 内 容 CSS 样式 : 实际 是 对 超级 链接 各 
状态 的 显示 效果 进行 样式 定义 。 其 显著 特征 
是 该 类 样式 会 自动 为 创建 了 超级 链接 的 所 有 
对 象 应 用 样式 。 


<style type="text/cas"> 

a:link 《 
text-decoration: underline; 
color: #FFFFS6; 

} 

a:visited { 
text-decoration: underline; 
color: #CF9; 

)》 

a:hover 1 
text-decoration: none; 

} 

a:active 上 
text-decoration: underline; 


1 
[</style> 


ID CSS 样式 名 称 前 有 “#” 符 号 ， 而 类 CSS 样式 则 为 “.” 符 号 。 在 定义 CSS 样式 时 ， 类 CSS 


样式 对 应 “class” 属 性 ， 如 “class="top"”， 


2.3.2 ”创建 并 应 用 CSS 样式 


ID CSS 样式 对 应 “id” 属 性 ， 即 “id="top"”。 


在 认识 了 CSS 样式 表 后 ， 也 应 该 知道 如 何 创建 CSS 样式 表 ， 在 Dreamweaver CS6 中 创建 
CSS 样式 表 的 途径 比较 多 ， 最 常用 的 是 通过 “CSS 样式 ”面板 完成 ( 在 熟练 的 情况 下 也 可 直接 


使 用 代码 创建 ) ， 并 且 所 创建 的 CSS 样式 表 分 为 内 部 样式 表 和 外 部 样式 表 。 下 


样式 表 和 外 部 样式 表 的 创建 及 应 用 方法 。 
1. 内 部 CSS 样式 


内 部 CSS 样式 是 指 存放 在 网 页 代码 中 ， 并 非 以 单独 的 层 亚 样式 表 文 件 而 存在 的 形式 ， 在 


将 介绍 内 部 


Dreamweaver CS6 中 可 以 直接 在 “CSS 样式 ”面板 中 创建 内 部 样式 。 


操作 如 下 : 


下 面 将 在 “CSS.html” 网 页 中 ， 为 所 选 文本 创建 内 部 CSS 样式 以 美化 文本 效果 ， 其 具体 


制作 简单 绚丽 的 网 页 区 过 和 


| CIsrx 
wi 打开 “新 建 CSS 规则 ”对 话 框 ”区 
打开 “css html” 网 页 ， 按 ShifttF11 组 合 键 ， | 站 和 和 TT 
打开 “CSS 样式 ”面板 。 1 
2 在 该 面板 的 右 下 角 ， 单 击 “ 新 建 CSS 规则 ” 按 和 
钮 回 ， 打 开 “ 新 建 CSS 规则 ”对 话 框 。 eh 和 入 和 
个 人 信息 提供 给 无 关 的 第 三 方 包 括 公司 或 个 人 )。 但 
是 ， 如 昱 您 要 求 我 们 提供 特定 客户 支援 服务 或 把 - 
. 些 物品 送 交 给 您 ， Ct 提 
。 六 * 供给 第 三 者 如 运输 公司 。 我 们 的 网 站 将 会 提供 第 三 
Ee ry be 
| 用 户 也 可 以 通过 选择 [ 寄 oJyrCss | | A 
| 样式】 命令， 打开 “CSS 样式 ”面板 。 3 Dp 
En wl 
汪 人 [中 ae 可 72 口 
Hours 


本 本 输入 选择 器 名 称 


1.， 在 打开 对 话 框 的 “选择 器 名 称 ” 下 拉 列 表 框 
中 输入 “.text”， 其 他 保持 默认 设置 。 
2.， 单 击 匡 栈 辐 按钮 。 


| 可 在 编辑 区 中 单 击 鼠标 右键 ， 在 弹 弹 | CN] 

| 出 的 快捷 菜单 中 选择 【CSS 样式 [新 建 ] 命 令 ，| 

| 即 可 打开 “新 建 CSS 规则 ”对 话 框 。 | 52 

人 
^ 

SE 设置 Css 样式 中 的 属性 


1. 在 打开 对 话 框 的 “分 类 " 列表 框 中 选择 "类 型 " 


选项 。 人 

2.， 在 “Font-family” 下 拉 列 表 框 中 选择 文本 的 人 
字体 为 “方正 大 黑 简 体 ”。 

3. 在 “Color” 文本 框 中 输入 颜色 “#FC9”。 

4. 单 击 EEBE 9 按钮， 完成 CSS 样式 属性 设置 。 


32 
Te Hour: 
在 设置 颜色 时 ， 可 直接 单 击 “Color” | "人 
葵 后 的 按钮 剧 ， 在 弹出 的 颜色 面板 中 选择 ， 
需要 的 颜色 ， 系 统 也 会 自动 在 其 文本 框 中 填充 ， 
1 . 磊 色 值 。 


和 经 验 一 筹 仍 一 一 设置 CSS 样式 中 的 其 他 属性 


在 “CSS 规则 定义 ” 对话 框 中 , 除了 可 设置 “类 型 选项 中 的 各 种 属性 外 , 同样 也 可 选择 其 他 选项 ， 
对 其 他 属性 进行 设置 ， 如 设置 背景 、 边 框 等 效果 。 
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wi 应 用 CSS 样式 


- 返回 到 网 页 编辑 区 中 ， 将 插入 点 定位 到 需要 
应 用 .text 样式 的 文本 后 。 

2 在 “属性 ”面板 中 ,选择 “类 ”下 拉 列 表 框 
中 的 “text” 选 项 ， 完 成 所 有 操作 。 


得 i 
| 在 定义 完 CSS 样式 后 ， 则 可 在 “CSS | 
| 样式 ”面板 中 查看 到 所 有 的 CSS 样式 文件 。 


人 


供 闫 无 关 的 第 三 方 包 括 公司 或 个 人 )。 但是， 如 果 多 要 
人 些 物品 


公司 。 和 | 站 将 会 于 我 
天 有 


银 所 法 律 性 规定 ， 
可 之 前 ， 生生 人 生生 小 人 信息 及 


或 把 一 些 物 品 送 广 抬 你 
人 运 和 办 


一 筹 盘 一 一 使 用 代码 创建 内 部 样式 


切换 到 “代码 ”视图 中 ， 在 </head> 前 添加 <style type="text/ |<3tyle zype rexr/csa > 
css"></style> 标签 ， 并 在 该 标签 中 创建 CSS 内 部 样式 ， 也 | font-family: "方正 大 黑 简体 " 
可 以 在 行内 添加 内 部 样式 ， 如 <p style="color:#CC9; font- : olgnl Mec 


size:14px"></p>。 


2. 外 部 CSS 样式 表 


text { 


[</style> 


在 Dreamweaver CS6 中 ， 创 建 外 部 CSS 样式 后 ， 可 以 在 多 个 网 页 中 应 用 相同 的 CSS 样式 ， 
避免 在 不 同 的 网 页 中 创建 相同 的 CSS 样式 , 这 样 可 以 节省 制作 网 页 的 时 间 , 从 而 提高 制作 效率 。 
下 面 将 在 “css2.html” 网 页 中 应 用 创建 的 外 部 CSS 样式 文件 ， 让 “css2.html” 网 页 更 加 美 


观 。 其 具体 操作 如 下 : 


AGE 用。 准备 新 建 外 部 样式 


打开 “css2.html” 网 页 ， 在 页 面 编辑 区 单 击 鼠标 
右键 , 在 弹出 的 快捷 菜单 中 选择 [ CSS 样式 ] 儿 [ 新 
建 ] 命令 ， 打 开 “ 新 建 CSS 规则 ”对 话 框 。 


a 如 果 用 户 在 弹出 的 快捷 菜单 中 选择 | 
CSS 样式 】/【 附 加 样式 表 】 命 令 ， 则 可 在 | 
打开 的 对 话 框 中 选择 已 经 创建 好 的 CSS 样式 ， 
| 进行 引用 | 


AGE 有。 设置 选择 器 类 型 、 名 称 与 规则 

1 在 “选择 器 类 型 ”下 拉 列表 框 中 选择 类 型 “ 标 
签 ( 重新 定义 HTML 元 素 ) ”选项 。 

2.， 在 “选择 器 名 称 ” 下 拉 列 表 框 中 选择 标签 名 称 

3. 在 “规则 定义 ”下 拉 列 表 框 中 选择 ”( 新 建 样 
式 表 文件 ) ”选项 。 

4， 单 击 EEBEoa 按 钮 。 


本 本 人 Lcss 文 件 


1.， 在 打开 对 话 框 的 “保存 在 ”下 拉 列 表 框 中 选 
择 保存 位 置 。 

2.， 在 “文件 名 ”文本 框 中 输入 CSS 样式 的 名 称 
“CSS_P" 。 

3. 单 击 [EN 名 9 按钮 。 


Morgentedor CD): ED 
Backeroand-inage TE): @J 输 入 ) - EE 
Barkpromd repeat EB); 

Backgr ound- attachnent I): 


Backeromd-position () 
Backeromd-p0sition () 


制作 简单 绚丽 的 网 页 


AGE 0 二。 设置 边框 属性 

1.。 在 打开 对 话 框 的 “分 类 " 列表 框 中 选择 "边框" 
选项 。 

2.， 在 右 侧 窗 格 中 分 别 将 “Style”、“Width" 
及 "Color "属性 设置 为 "solid"“1" 和 "#FCC"。 


AGER 05 弛 设置 背景 颜色 


1.， 在 “分 类 ”列表 框 中 选择 “背景 ”选项 。 

2.， 在 右 侧 窗 格 中 将 “Background-color” 值 设 
置 为 “#FFF8D9”。 

3. 单 击 国 可 到 按钮 。 


二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


AGE 6 最， 自动 应 用 了 样式 效果 En 
在 编辑 区 中 可 以 看 到 ， 应 用 了 标签 <p></p> 的 文 En we 一 [as | 


EE mi 


本 则 自动 应 用 了 样式 效果 。 


人 每 当 称 握 供给 我 们 生 | 恒 
感 信息 时 ， 我 们 将 秒 取 言 理 的 步 票 保护 您 的 敏 感 信息， 我 们 
也 扫 采 职 合理 9 去 全 手 彼 保 


a ey re 

访 在 同一 对 象 可 以 同时 应 用 多 个 样 

| 广 ， 应 用 多 个 CSS 样式 的 代码 如 “class='Yed 
text"”， 即 在 每 个 样式 名 称 中 间 用 空格 相隔 。 


所 五 


间 ; 不 同 的 样式 到 底 该 如 何 应 用 呢 ? 
答 : 在 Dreamweaver CS6 中 有 3 种 类 型 的 类 可 以 自动 应 用 CSS 样式， 分 
别 是 ID CSS 样式 、 标 签 CSS 样式 和 复合 内 容 CSS 样式 ， 而 用 户 自 定义 的 


类 CSS 样式 则 需要 手动 设置 ， 才 能 应 用 到 内 部 或 外 部 样式 。 如 果 是 内 部 CSS 样式 文件 ， 则 可 直 
接 选 择 需 要 引用 的 对 象 ， 在 “CSS 样式 ”面板 中 选择 需要 应 用 的 CSS 样式 的 名 称 ， 单 击 鼠 标 右键 ， 
在 弹出 的 快捷 菜单 中 选择 “应 用 ”命令 ， 即 可 对 选择 的 对 象 应 用 所 选 的 CSS 样式 ; 如 果 不 是 外 部 
CSS 样式 ， 可 将 CSS 样式 文件 复制 到 与 网 页 所 在 的 同一 个 文件 夹 下 ， 即 可 使 用 内 部 CSS 样式 的 
方法 应 用 CSS 样式 。 


2.3.3 修改 CSS 样式 


在 实际 定义 CSS 样式 的 过 程 中 ， 可 以 先 定义 一 个 基本 的 CSS 样式 ， 预 览 后 再 对 样式 进行 
修改 ， 直 至 效果 满意 为 止 ， 修 改 CSS 样式 后 ， 应 用 了 样式 的 对 象 将 自动 更 新 显示 效果 。 下 
将 介绍 两 种 修改 CSS 样式 的 常用 方法 。 

1. 使 用 “规则 定义 ”对 话 框 修改 

在 CSS 规则 定义 对 话 框 中 修改 CSS 样式 的 方法 很 简单 ， 只 需要 在 “CSS 样式 ”面板 中 ， 
选择 需要 进行 修改 的 CSS 样式 的 名 称 。 单 击 鼠标 右键 , 在 弹出 的 快捷 菜单 中 选择 “编辑 ”命令 ， 
打开 对 应 CSS 名 称 的 "规则 定义 "对 话 框 , 在 对 话 框 中 重新 设置 各 种 样式 的 参数 , 设置 完 参 数 后 ， 
单 击 世 和 宇 -按钮 即 可 完成 CSS 样式 的 修改 。 


一 筹 乱 一 一 快速 修改 CSS 样式 


在 “CSS 样式 ”面板 中 双击 需要 修改 的 CSS 样式 名 称 ， 打 开 对 应 的 “规则 定义 ”对 话 框 进行 修 
改 或 选中 需要 修改 的 CSS 样式 ， 单 击 国 按钮 打开“ 规则 定义 ”对 话 框 进 行 修改 。 
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2. 使 用 “属性 ”选项 修改 

如 果 用 户 想 要 在 Dreamweaver CS6 中 
修改 CSS 样式 中 的 各 种 属性 ， 可 直接 按 
ShifttF11 组 合 键 ， 打开 “CSS 样式 ”面板 ， 
在 该 面板 中 的 “所 有 规则 ” 栏 中 选择 需要 修 
改 的 CSS 样式 ， 然 后 在 “属性 ”选项 卡 下 对 
所 选 的 CSS 样式 的 各 种 属性 进行 修改 即 可 。 


2.3.4 设置 CSS 样式 的 属性 

在 创建 内 部 和 外 部 样式 时 , 所 使 用 到 的 CSS 规则 定义 对 话 框 中 各 种 属性 , 如 "类 型 "、" 背 
景 " 、“ 区 块 ”、“ 方 框 "” 、“ 边 框 " 、“ 列 表 ”、“ 定 位 ”和 “扩展 ”等 8 个 选项 中 所 设 
置 的 各 种 属性 。 下 面 将 分 别 对 其 具体 的 含义 进行 介绍 。 


1. “类 型 ”选项 wu 
在 CSS 规则 定义 对 话 框 的 “分 类 ”列表 Tn i 
框 中 选择 “类 型 ”选项 ， 在 对 话 框 右 侧 窗 格 A 
中 则 可 以 对 文本 的 样式 进行 具体 的 设置 ， 如 Treoor Sith 国 
下 表 所 示 为 常用 属性 的 具体 作用 。 Re 
加 none WW 


“类 型 ”选项 常用 属性 
属 性 作 用 
设置 文本 的 特殊 格式 ， 如 “斜体 ”、 


设置 文本 的 变形 方式 ， 如 “小 型 大 写字 母 ”等 
设置 英文 文本 的 大 小 写 形式 ， 如 “ 首 字母 大 写 ”、 ”和 “小 写 ” 
设置 文本 的 修饰 效果 ， 如 上 划 线 、 删 除 线 及 下 划 线 等 
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人 1 “背景 ” 选项 分 关 Es 


在 CSS 规则 定义 对 话 框 的 “分 类 ”列表 


Backeromd-coler tt): [El 


因 BeckeromiineD: EBD 
框 中 选择 “背景 ”选项 ， 在 对 话 框 右 侧 可 以 Wo 


Backereand-yositicn 0) 


对 背景 样式 进行 设置 。 如 下 表 所 示 为 常用 属 
性 的 具体 作用 。 


Backeround-yosition 0 


“背景 ”选项 常用 属性 

属 性 
设置 背景 颜色 
设置 背景 图 像 ， 单 击 EBEE 汪 按钮 ， 在 打开 的 对 话 框 中 可 进行 选择 ， 也 可 直接 
在 下 拉 列 表 框 中 输入 背景 图 像 的 路 径 和 名 称 
设置 背景 图 像 的 重复 方式 , 包括 “不 重复 ”、“ 重 复 ”、“ 水 平 重 复 ” 和 “ 重 
直 重 复 ”4 个 选项 
设置 背景 图 像 是 固定 在 原始 位 置 还 是 可 以 滚动 的 
设置 背景 图 像 的 水 平 位 置 ， 可 选择 “left ( 左 对 齐 ) ”、“center ( 居中 ) ”、 
“right ( 右 对 齐 ) ”等 选项 ， 也 可 选择 “ ( 值 ) ”选项 后 ， 直 接 在 其 中 输入 
水 平 位 置 的 值 
设置 背景 图 像 的 垂直 位 置 ， 可 选择 “top ( 顶部 ) ”、“center ( 居中)”、 
“bottom (底部 ) ”等 选项 ， 也 可 选择 “( 值 ) ”选项 后 ， 直 接 在 其 中 给 入 


Background-image 


Background-repeat 


Background-position (X) 


Background-position (Y ) 


简写 背景 CSS 样式 代码 


background-image: url(images/7-2-1.jpg); 
background-repeat: regeat-x; 
background-position: fcenter top; 


在 Dreamweaver CS6 中 可 以 将 复杂 的 背景 代 
码 简 单 化 。 


background:url (images/7-2-1.jpg) top repeat-x; 


区 由 “区 块 ” 选项 3 区 天 

在 CSS 规则 定义 对 话 框 的 “分 类 ”列表 i | 
框 中 选择 “区 块 ”选项 ， 在 对 话 框 右 侧 可 以 OQ 
对 区 块 样式 进行 设置 。 下 面 将 分 别 介绍 各 参 et 
数 的 具体 作用 。 ee 二 二 


“Word-spacing” 下 拉 列 表 框 : 用 于 设置 单词 之 间 的 间距 ， 只 适用 于 英文 。 
“Letter-spacing” 下 拉 列 表 框 : 用 于 设置 字母 之 间 的 间距 。 

“Vertical-align” 下 拉 列 表 框 : 用 于 设置 文本 在 垂直 方向 上 的 对 齐 方式 

“Text-align” 下 拉 列 表 框 : 用 于 设置 文本 在 水 平方 向 上 的 对 齐 方式 。 

“Text-indent” 文 本 框 : 用 于 设置 文本 首 行 缩 进 的 距离 。 

“White-space” 下 拉 列 表 框 : 用 于 设置 处 理 空格 的 显示 方式 ,包括 “normal( 正常 )”、“pre 
(保留 ) ”和 “nowrap ( 不 换行 ) ”3 种 方式 ， 如 果 选 择 “normal” 选 项 ， 则 会 将 多 个 空 
格 显示 为 1 个 空格 选择 “pre” 选项, 则 以 文本 本 身 的 格式 显示 空格 和 回 车 ; 选择 “nowrap” 
选项 ， 则 以 文本 本 身 的 格式 显示 空格 但 不 显示 回 车 。 


ppp 


制作 简单 绚丽 的 网 页 


各 “Display” 下 拉 列 表 框 : 在 其 中 可 选择 区 块 中 要 显示 的 格式 。 


4. “ 方 框 ”选项 | 一 一 一 一 
| Wahm :而 EBD ow) 号 

在 CSS 规则 定义 对 话 框 的 “分 类 ”列表 人 一 aa :a :一 

框 中 选择 “ 方 框 ” 选项， 在 对 话 框 右 侧 可 以 | 本 

对 方 框 样式 进行 设置 。 下 面 将 分 别 介绍 各 参 | 

数 的 具体 作用 。 

“Width” 下 拉 列 表 框 : 设置 方 框 的 宽度 。 

“Height” 下 拉 列 表 框 : 设置 方 框 的 高 度 。 

“Float” 下 拉 列 表 框 : 设置 方 框 中 文本 的 环绕 方式 。 

“Clear” 下 拉 列 表 框 : 设置 层 不 允许 在 应 用 样式 元 素 的 某 个 侧 边 。 

“Padding” 栏 : 指定 元 素 内 容 与 元 素 边框 之 间 的 间距 。 

“Margin” 栏 : 用 于 设置 指定 元 素 的 边框 与 另 一 个 元 素 之 间 的 间距 。 


从 
pd 
pd 
2 
pd 
pd 


1 经 验 一 筹 能 一 一 容器 布局 技巧 


容器 在 这 里 一 般 是 指 div， 对 于 左右 两 栏 的 网 页 布局 ， 可 以 使 用 如 下 图 所 示 的 布局 代码 ， 其 中 左 
图 为 容器 代码 ， 右 图 为 对 应 的 CSS 样式 定义 代码 。 


<style type="text/css"> 


<div class="nain"> -nain{width: 960px :margin: 0 auto;padding:0} 
<div class="left">left</div> ain .space(height:10px;padding:0) 
<div class="right">right</div> -nw lefcfwidch:250px;floac:lefc) 


<div class="clear"></div> * right (width: 700px ;float: right) 
</div> .Clear{clear:borh;} 
</style> 


5. “边框 ”选项 
在 CSS 规则 定义 对 话 杠 的 “分 类 ”列表 框 中 选择 “边框” 选项 ， 在 对 话 框 右 侧 可 以 对 边 
框 样式 进行 设置 。 


Stone Wadeh 
加 全 部 相同 瑟 全 部 相同 
sd vi -区 


sd 


EIT 


介绍 各 参数 的 具体 作用 。 
“Style” 栏 : 用 于 设置 元 素 上 、 下 、 左 、 右 的 边框 样式 。 


下 面 将 分 另 


“Width” 栏 : 用 于 设置 元 素 上 、 下 、 左 、 右 的 边框 宽度 。 
“Color” 栏 : 用 于 设置 元 素 上 、 下 、 左 、 右 的 边框 颜色 。 


‘pp 


Hour: 
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6. “列表 ”选项 
在 CSS 规则 定义 对 话 框 的 “分 类 ”列表 框 中 选择 “列表 ”选项 ， 在 对 话 框 右 侧 可 以 对 列 
表 样 式 进行 设置 。 一 般 会 用 在 网 页 导航 文本 中 。 


下 面 将 分 别 介绍 各 参数 的 具体 作用 。 

和 内 “List-style-type” 下 拉 列 表 框 : 在 其 中 可 选择 无 序列 表 的 项 目 符号 类 型 和 有 序列 表 的 编 
号 类 型 。 

让 “List-style-image” 下 拉 列 表 框 :在 其 中 可 指定 图 像 作为 无 序列 表 的 项 目 符号 ， 可 直接 在 
其 中 输入 图 像 的 路 径 ， 也 可 单 击 葬 本 -9 按钮 ， 在 打开 的 对 话 框 中 选择 图 像 。 

从 “List-style-Position” 下 拉 列 表 框 : 在 其 中 可 以 选择 列表 文本 是 否 换行 和 缩 进 。“outside” 
选项 表示 当 列 表 过 长 而 自动 换行 时 以 缩 进 方式 显示 ; “inside” 选 项 表示 当 列 表 过 长 而 自 
动 换行 时 不 缩 进 。 


| 经 验 一 筹 管 一 一 取消 项 目 符号 


在 网 页 中 ， 如 果 想 取消 列表 文本 的 项 目 符号 ， 可 直接 将 属性 “List-style-type” 设 置 为 “none”， 
如 果 是 代码 则 写 为 List-style-type:none。 


7. “定位 ”选项 


分 类 
在 CSS 规则 定义 对 话 框 的 “分 类 "列表 | muon :tio 
框 中 选择 “定位 ”选项 ， 在 对 话 框 右 侧 可 以 “|| mmm ee 


对 对 象 或 容器 的 定位 样式 进行 设置 。 一 般 会 
在 容器 的 布局 上 。 下 面 将 分 别 介绍 其 主要 
参数 的 具体 作用 。 


人 如 “Position” 下 拉 列 表 框 : 用 于 设置 定位 的 方式 ， 选 择 “ 绝 对 ”选项 可 以 使 用 “定位 ” 框 
中 输入 的 坐标 相对 于 页 面 左上 角 来 放置 层 ; 选择 “相对 ”选项 可 以 使 用 “定位 ” 框 中 输入 
的 坐标 相对 于 对 象 当 前 位 置 来 放置 层 ; 选择 “静态 ”选项 可 以 将 层 放 在 它 在 文本 中 的 位 置 。 

加 “Visibility” 下 拉 列 表 框 : 确定 层 的 显示 方式 , 选择 “继承 ”选项 将 继承 父 层 的 可 见 性 属性 ， 
如 果 没 有 父 层 ， 则 可 见 ; 选择 “可 见 ” 选 项 将 显示 层 的 内 容 ; 选择 “隐藏 ”选项 将 隐藏 层 
的 内 容 。 

如 “Z-Index” 下 拉 列 表 框 : 确定 层 的 堆 司 顺序 。 编 号 较 大 的 层 显示 在 编号 较 小 的 层 上 面 。 

让 “Overflow” 下 拉 列 表 框 : 确定 当 层 的 内 容 超出 层 的 大 小 时 的 处 理 方式 ， 选 择 “ 可 见 ” 选 


制作 简单 绚丽 的 网 页 


项 将 使 层 向 右 下 方 扩展 ， 以 所 有 内 容 都 可 见 ; 选择 “隐藏 ”选项 将 保持 层 的 大 小 并 剪辑 任 
何 超出 的 内 容 ; 选择 “滚动 ”选项 将 在 层 中 添加 滚动 条 ， 不 论 内容 是 否 超出 层 的 大 小 ; 选 
择 “自动 ”选项 ， 则 当 层 的 内 容 超 出 层 的 边界 时 显示 滚动 条 。 

得 “Placement” 栏 : 指定 层 的 位 置 和 大 小 。 

介 “Clip” 栏 : 定义 层 (div) 的 可 见 部 分 。 


8. “扩展 ”选项 


在 CSS 规则 定义 对 话 框 的 “分 类 ”列表 多 要 
框 中 选择 “扩展 ”选项 ， 在 对 话 框 右 侧 可 以 | = 


对 扩展 样式 进行 设置 。 下 面 将 分 别 介绍 各 栏 本 
的 含义 。 ne 


(1) “分 页 ” 栏 

于 控制 打印 时 在 CSS 样式 的 网 页 元 素 之 前 或 之 后 进行 分 页 。 只 需 在 其 下 的 两 个 下 拉 列 

表 框 中 进行 设置 即 可 。 下 面 将 分 别 介绍 各 参数 的 具体 作 
亿 “Page-break-before” 下 拉 列 表 框 : 控制 打印 时 在 Ca 样式 的 网 页 元 素 之 前 进行 分 页 。 
如 “Page-break-after” 下 拉 列 表 框 : 控制 打印 时 在 CSS 样式 的 网 页 元 素 之 后 进行 分 页 


(2 ) “视觉 效果 ” 栏 
该 栏 的 作用 主要 是 在 应 用 了 CSS 样式 后 ， 鼠 标 光标 在 网 页 中 移动 时 所 变化 的 形状 。 下 面 
将 分 别 介 绍 各 参数 的 具体 作用 。 
让 “Cursor” 下 拉 列 表 框 : 用 于 设置 鼠标 光标 移动 到 应 用 CSS 样式 的 网 页 元 素 上 的 形状 。 
即 为 该 下 拉 列 表 框 中 各 选项 所 对 应 的 鼠标 样式 。 
得 “Filter” 下 拉 列 表 框 : 设置 应 用 CSS 样式 的 网 页 元 素 的 特殊 效果 ， 不 同 的 选项 有 不 同 的 
设置 参数 。 


问 : 如 何 看 到 设置 属性 后 的 各 代码 ? 
答 : 在 规则 。 [Bw le 
定义 对 话 框 eHR le) EV i 第 玉 (M) 和 SOI ee st(S) 富 口 (W) 敌 助 (H) 


中 所 设置 的 属性 参数 ， 都 可 以 在 网 
页 文档 中 查看 到 相应 的 代码 ， 其 方 
法 为 : 在 “CSS 样式 ”面板 中 ， 选 
择 需 要 查看 代码 的 CSS 样式 的 名 
称 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 
菜单 选择 “ 转 到 代码 ”命令 ， 如 果 
是 外 部 CSS 样式 ， 则 会 在 网 页 编辑 
区 中 自动 打开 CSS 文档 ; 如 果 是 内 
部 CSS 样式 则 直接 转 到 所 写 编 辑 代 
码 的 位 置 。 


[ER 和 了 了 可 骨 ] 


Hour: 


让 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


国美 化 “Flower_L.html” 网 页 


进一步 掌握 CSS 样式 的 创建 方法 。 


进一步 掌握 CSS 样式 的 各 种 属性 。 


1 以 进一步 熟悉 CSS 样式 的 引用 。 用 | 


下 面 将 在 “Flower L.html” 网 页 中 ， 新 建 CSS 样式 ， 应 用 到 该 网 页 上 ， 以 达到 美化 网 页 


的 效果 。 同 时 ， 让 用 户 更 加 熟练 地 掌握 CSS 样式 的 各 种 属性 ， 以 及 各 属性 的 作用 ， 其 最 终 效 


果 如 下 图 所 示 。 
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EE 化 语 
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网 站 首页 疼 花 属 示 盆景 欣赏 插花 选 购 ”网 上 定购 Weloome To SmileFlowers 


yp 2 浅 


Copyright © SmileFlowers 2014 An rights rexerved 


关于 我 们 。 留言 板 。 其 他 花 杀 ”友情 妖 嫌 


本 本 而 和 准备 创建 CSS 样式 


1. 打开 “Flower_L.html” 网 页 ， 选 择 带 项 目 符 
号 的 所 有 文本 。 

2.， 按 Shift+F11 组 合 键 , 打开 “CSS 样式 " 面板 ， 
在 面板 右 下 角 ， 单 击 “ 新 建 CSS 规则 ” 按 
钮 加 打开 “新 建 CSS 规则 ”对 话 框 。 


4 [一 一 由 ' 
NO A tm -| 日 辐 国 二 :amv 上 


E33 
Am] 坊 式 mn 区 = 
oi 


ET 五 押 三 ~ 全 从 


AGE 创建 css 样式 


1. 在 打开 对 话 框 的 “选择 器 类 型 ”下 拉 列 表 框 
中 选择 “类 ( 应 用 于 所 有 的 HTML 元 素 ) ” 
选项 。 

2.， 在 "选择 器 名 称 ”下 拉 列 表 框 中 输入 “.nav”。 

3. 依次 单 击 EEBEa 按 钮 ， 返 回 到 “CSS 样式 ” 
面板 中 即 可 查看 到 新 建 的 .nav 样式 。 


HE Rt 

1. 保持 新 建 的 .nav 样式 的 选中 状态 。 

2.， 在“.nav 属性 ”选项 卡 下 展开 “ 方 框 ”选项 。 
在 “margin” 属 性 后 的 文本 框 中 输入 属性 值 
“Opx”。 

3， 在 “padding” 属 性 后 的 文本 框 中 输入 属性 值 
“0px”。 按 Enter 键 结束 输入 。 


“margin” 和 “padding” 属 性 值 设置 
Opx 和 没有 设置 是 不 一 样 的 ， 因 为 在 不 同 的 浏 
览 器 中 都 会 存在 一 定 的 边 距 ， WA 
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制作 简单 绚丽 的 网 页 


Dw ms . Ent-lel 
吾 相 V， 其 和 WD oe 种 0) 地 (9 了 RS 检 口 (W) 如 和 [外 


RE oe me 
LB CE Cd 


AGE 应 用 创建 的 Css 样式 


在 “所 有 规则 ”选项 下 选择 “.nav” 样 式 ， 单 击 
鼠标 右键 , 在 弹出 的 快捷 菜单 中 选择 "应 用 " 命令 ， 
便 可 将 其 创建 的 CSS 样式 应 用 到 选择 的 文本 中 。 


Ee 


加 


可 下 展 款 了 从 要 也 和 1 


在 编辑 网 页 时 ， 如 果 网 页 中 有 多 个 容器 ( div、p ) 等 。 可 直接 在 “属性 ”面板 上 方 的 状态 栏 中 


ee A 
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Hour: 


二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


WE 县。 应用 样式 


1. 选择 网 页 右 下 角 的 链接 文本 。 
2.， 在 “属性 ”面板 的 “类 ”下 拉 列 表 框 中 选择 
“.nav” 选 项 。 


i 应 用 创建 CSS 社 坟 的 方法 委 多 ， | 
| 户 可 根据 习惯 任 一 选择 一 种 进行 使 用 ， 以 提高 | 
1 用户 制作 网 页 的 效率 ， 


本 十 名 引用 外 部 CSS 样式 


1. 选择 链接 下 方 的 所 有 图 片 。 

2. 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 
【 CSS 样式 】/【 附加 样式 表 】 命令 , 打开“" 链 
接 外 部 样式 表 ” 对 话 框 。 


5 折 图 片 时 ， 可 直接 选择 第 一 张 图 | 
按 Shift 键 ， 单 击 最 后 一 张 图 片 即 可 将 第 | 
国有 和 最后 一 张 之 间 的 所 有 图 片 和 中 
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We 
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上 经 验 一 


筹 估 一 “链接 外 部 样式 表 ” 


[一 一 一 一 十 到 


ra an [voc ho ~ go EE 


(esa ] 
@DY 选择 为 规划 (V)… 


Sr Br 上 


选择 要 引用 的 外 部 CSS 样式 


在 打开 对 话 框 的 “文件 /URL” 文 本 框 后 单 
击 葬 本 本 按钮 ,打开 "选择 样式 表 文 件 "对 话 框 。 

2. 在 “查找 范围 ”下 拉 列 表 框 中 选择 CSS 文件 
所 在 的 位 置 。 

3. 在 下 方 的 列表 框 中 选择 需要 引用 的 CSS 样式 
文件 。 

4. 依次 单 击 匡 驶 到 按钮 。 


Drewwesver 的 范例 样式 赤 可 以 帮助 您 起 步 。 


对 话 框 中 单 选 按 钮 的 作用 


在 “链接 外 部 样式 表 ” 对 话 框 中 有 两 个 单 选 按钮 ， 分 别 为 回 链接 四 和 @EK 醒 单 选 按钮 ， 如 果 在 链 
接 外 部 CSS 样式 文件 时 ， 选 中 回 链接 四 单 选 按钮 ， 则 以 链接 的 形式 存在 于 网 页 文档 中 ; 如 果 选 
中 加 昔 Kgj 单 选 按钮 ， 则 会 以 内 部 样式 形式 存在 于 网 页 文档 中 。 


EE 志 看 效果 


在 应 用 样式 后 , 即 可 在 网 页 编辑 区 中 查看 到 效果 。 


完成 整个 例子 的 所 有 制作 。 
LU 
读书 笔记 


2.4 练习 2 小 时 


本 章 主要 介绍 


制作 简单 绚丽 的 网 页 


了 制作 网 页 的 基本 操作 、 在 网 页 中 添加 一 些 对 象 、 动 态 元 素 ， 以 及 美化 网 


页 的 CSS 样式 等 知识 ， 结 合 本 章 所 讲解 的 知识 ， 可 以 制作 出 简单 绚丽 的 网 页 ， 下 面 就 以 练习 
制作 “help.html” 网 页 和 美化 “zhuangshihtml” 网 页 为 例 , 让 用 户 对 制作 网 页 进行 全 面 的 提升 。 


(个 ”制作 “help.html” 网 页 


本 例 将 根据 提供 的 素材 ， 
“help.html”。 首 先 设置 页 面 背景 色 ， 并 
在 网 页 的 相应 位 置 处 添加 图 片 ， 再 为 文本 
添加 链接 ， 最 后 为 每 个 步骤 文本 创建 内 部 
CSS 样式 ， 其 效果 如 右 图 所 示 。 


制作 网 页 


”在 制作 该 网 页 时 打开 素材 网 页 etp 
ml” 并 输入 文本 及 添加 图 像 ， 再 为 文本 <p 
e163 cman dh 添加 链接 。 并 定义 ， 
“b”CSS 样式 ， 定义 “hl” 标签 CSS 样式 。 
ey 3 a 步 ” 


k 
i 
Ss 
| 
| 
沁 1 
9 
2 
康 


ee 
oh 


| 第 一 步 : 的 ‘www.gq5163.com/login php 
| 并 按 【Enter】 键 打开 登 


在 打开 的 网 页 中 “用 户 名 "文本 框 中 单 击 并 输入 注册 时 的 
0"qq5163™。 
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Hour: 


[到 忆 :证 滞 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop Cs6 版 ) 


(2， 美化 “zhuangshi.html” 网 页 


本 例 将 对 制作 好 的 网 页 “zhuangshi.html” 首 页 进行 美化 ， 在 网 页 中 插入 SWF 动画 ， 通 
过 链接 外 部 CSS 样式 文件 ， 为 网 页 进行 整体 美化 ， 其 最 终 效果 如 下 图 所 示 。 


如 成 部 名 宇 装 肇 有 限 公 司 站 站 寅 言 | 关子 总 加 
a 人 2 ”野牛 区 总 代理 ( 鱼 牛 带 宇 专营 店 ) 1 产 吕 然 虑 。028_67BIAhtt 
sd ED 


| | | 


| 
} 


下 


[SEE | 关于 汉字 | 竹本 条 全 之 家 ， 信 演 六 别 注 匡 ， 实 关中 站 沾 放 亲信 训 颖 避 辽 并 的 条 ”网 和 、 


羔 字 芋 样 在 陵 公 司 子 2007 年 底 之 子 上 海 ， 到 日 黄 为 寺 已 是 区 小 行 查 中 的 佼 仅 老 在 
rn 
村 样子 一 位 的 专业 多 十 计 公司 。 可 以 为 相关 二 主 奖 人 殿 莹 等 时 外 方 现 的 守 永 文 持 ， 
括 抽 殿 运 计 名 和 村 竺 工人 。 从 洛 宇 检 有 守卫 突 型 多 和 上 入 人 广 二 生 各 

; 让 告 雹 主攻 受 加 站 本 训 卖 。 网 De 
半 药 革 沉 要 的 天 无， 如 


- 号 公 司 在 让 都 市 全书 区 | 
让 | 


的 分 公司 机 站 .于 了 可 以 括 
斑 条 的 竺 到 ， 网 村 在 基 亿 区 立 训 总 


鸡 放 家 居 著 饰 金牛 总 代理 
和 ”电话 ,028-6781er** 乔 三 新 乱 所 去 兰 位 千 生 行商 蔡 才 和 主 科 三 生 择 先 


第 
IT 7 


学 习 了 4 时 e 使 用 表格 进行 网 页 布局 
网 页 制作 人 员 在 制作 网 页 时 都 会 先 对 页 面 进 : : pa ai 
行 布局 ， 划 分 好 每 个 区 域 应 该 填充 的 内 容 ， 如 导 ; 
航 菜单 、 网 页 内 容 、 联 系 方式 等 ， 以 提高 对 整个 : 
网 页 的 整体 规划 能 力 ， 使 网 页 结构 更 加 清晰 。 在:  ® @ 
Dreamweaver CS6 中 可 以 通过 表格 、DIV+CSS 和 。 
框架 等 进行 网 页 布局 ， 使 网 页 效果 更 加 美观 。 。。 


上 机 4 小 时 


区 语 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


3.1 使 用 表格 进行 网 页 布局 


传统 意义 上 的 表格 是 用 来 输入 数据 的 ， 而 在 网 页 制作 中 ， 可 用 来 将 进行 网 页 布局 ， 将 网 页 
中 的 各 种 元 素 添加 到 表格 的 各 单元 格 中 ， 从 而 精确 地 控制 网 页 中 各 种 元 素 的 位 置 ， 让 整个 网 页 
看 起 来 更 加 美观 。 下 面 将 对 表格 的 创建 、 编 辑 和 属性 设置 等 操作 方法 进行 讲解 。 


四 EEC------ 


了解 表格 的 创建 方法 。 Q 掌握 编辑 表格 的 操作 方法 。 
1 ”@ 掌 握 选 择 表格 元 素 的 操作 方法 。 掌握 表格 属性 的 设置 方法 。 
I 

3.1.1 创建 表格 


在 网 页 中 ， 表 格 不 仅 可 以 为 页 面 进行 宏观 的 布局 ， 还 可 以 使 页 面 中 的 文本 、 图 像 等 元 素 看 
起 来 更 有 条 理 。 而 创建 的 表格 也 分 为 一 般 表格 和 嵌 套 表格 ， 但 其 方法 基本 相同 ， 都 需要 将 插入 
点 定位 到 需要 插入 表格 的 位 置 ， 打 开 “ 表 格 ” 对 话 框 进行 设置 。 下 面 将 分 别 介绍 创建 不 同 表格 
的 操作 方法 。 

1. 创建 一 般 表格 

创建 一 般 表 格 的 方法 很 简单 ， 最 常用 的 方法 是 通过 选择 【 插入 】/【 表格 】 命 令 ， 打 开 “ 表 
格 ”对 话 框 ， 在 打开 的 对 话 框 中 设置 需要 插入 表格 的 行 、 列 、 边 框 粗细 和 单元 格 的 边 距 和 间距 
等 ， 设 置 完 成 后 ， 单 击 匡 丁 天 按钮 即 可 。 


(ZJ 单 击 ) 


1 经验 一 敌 乱 一 一 默认 的 表格 边 距 和 间距 


默认 情况 下 ， 如 果 没 有 设置 表格 的 边 距 和 间距 ， 在 浏览 器 中 会 默认 为 表格 边 距 为 “1”， 间 距 为 
2 


2. 创建 谋 套 表格 


嵌 套 表格 是 指 在 表格 的 某 个 单元 格 中 再 插入 一 个 表格 ， 创 建 赔 套 表格 与 创建 表格 的 操作 方 
法 基本 相同 ， 嵌 套 表格 的 插入 点 应 定位 到 已 经 存在 的 表格 中 的 任意 一 个 单元 格 中 ， 再 使 用 创建 
一 般 表格 的 方法 插入 表格 即 可 。 


经 验 一 筹 仍 一 一 查看 源 代码 


如 果 用 户 想 查看 网 页 对 象 的 源 代码 ， 可 以 在 预览 网 页 时 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选 
择 “ 查 看 源 代码 ”命令 (不同 的 浏览 器 的 查看 源 代码 的 命令 是 不 相同 的 ) ， 即 可 查看 到 网 页 对 
象 的 源 代码 。 


3.1.2 ”选择 表格 元 素 

在 网 页 中 插入 了 表格 后 ,在 对 表格 进行 属性 设置 时 ， 应 先 选 择 表格 元 素 , 包括 选择 单元 格 、 
选择 整 行 或 整 列 、 选 择 整个 表格 等 。 下 面 分 别 介绍 这 几 种 选择 表格 元 素 的 操作 方法 。 

1. 选择 单元 格 

在 网 页 中 ， 选 择 单元 格 的 方法 很 简单 ， 如 果 要 选择 一 个 单元 格 ， 只 需 将 插入 点 定位 到 需要 
选择 的 单元 格 中 ;如 果 要 选择 多 个 不 连续 的 单元 格 ， 在 按 住 Ctrl 键 的 同时 ， 依 次 单 击 需 要 选择 
的 单元 格 即 可 。 


np 


(定位 ( | 


2. 选择 整 行 单元 格 
如 果 需 要 对 网 页 中 的 表格 进行 整 行 单元 格 的 属性 设置 ， 如 设置 行 高 ， 则 可 以 选择 整 行 单元 

格 进行 设置 。 下 面 将 对 选择 整 行 单元 格 的 几 种 情况 进行 介绍 。 

人 如 选择 单行 单元 格 : 将 饼 标 光标 移动 到 要 选 。 有 选择 多 行 单元 格 : 将 鼠标 光标 移动 到 要 先 

择 行 的 行 首 ， 当 鼠标 光标 变 为 -形状 时 ， 单 。” 择 行 的 行 首 ， 当 和 鼠标 光标 变 为 = 形状 时 ， 按 

击 鼠 标 ， 完 成 单行 单元 格 的 选择 。 住 鼠 标 左 键 不 放 向 下 拖 动 至 需要 选择 的 最 末 


一 行 ， 然 后 释放 鼠标 。 
| 
| 


| | | 
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3. 选择 整 列 单元 格 

如 果 需 要 对 整 列 单元 格 进行 属性 设置 ， 如 设置 列 宽 ， 则 可 以 选择 整 列 单元 格 进行 设置 。 
选择 整 列 单元 格 分 为 选择 单列 和 多 列 两 种 情况 ， 下 面 将 分 别 对 其 选择 的 方法 进行 讲解 。 
如 选择 单列 : 将 鼠标 光标 移动 到 要 选择 列 的 刀 选择 多 列 : 将 筷 标 光标 移动 到 要 选择 列 的 
顶部 ， 当 鼠标 光标 变 为 4 形状 时 ， 单 击 筷 标 ， 顶部 ， 当 鼠标 光标 变 为 4 形状 时 ， 按 住 鼠 标 左 
完成 单列 单元 格 的 选择 。 键 不 放 向 左 或 向 右 拖 动 至 要 选择 的 最 末 一 列 
然后 释放 鼠标 。 


4. 选择 整个 表格 

如 果 需 要 对 整个 表格 的 属性 进行 设置 ， 如 设置 表格 的 边框 粗细 、 填 充 和 间距 等 ， 应 先 选择 
整个 表格 , 再 在 “属性 " 面板 中 进行 设置 。 选 择 整个 表格 的 方法 比较 简单 , 主要 有 以 下 两 种 方法 。 
如 单 击 行 线 选择 : 将 鼠标 光标 移动 到 要 选择 甩 单 击 列 线 选择 : 将 鼠标 光标 移动 到 要 选择 
表格 的 行 线 上 ， 当 鼠标 光标 变 为 地 形状 时 ， ”表格 的 列 线 上 ， 当 鼠标 光标 变 为 中 形状 时 ， 
单 击 鼠 标 ， 完 成 整个 表格 的 选择 。 单 击 饼 标 ， 完 成 整个 表格 的 选择 。 


上 经 验 一 敌 能 一 一 在 表格 中 添加 各 种 元 素 


在 表格 中 添加 元 素 的 方法 与 直接 在 网 页 中 添加 各 种 元 素 的 方法 基本 相同 ， 唯 一 不 同 的 是 ， 在 表 
格 中 添加 元 素 需要 将 插入 点 定位 到 表格 中 的 单元 格 中 。 


3.1.3 ”编辑 表格 

在 网 页 中 ， 对 于 创建 好 的 表格 ， 有 时 也 并 非 完 全 符合 设计 者 的 需求 ， 此 时 就 需要 通过 对 表 
格 进行 相应 的 编辑 ， 以 达到 设计 者 想 要 的 效果 。 编 辑 表格 主要 是 对 表格 中 的 单元 格 进行 合并 或 
拆 分 、 添 加 或 删除 等 操作 ， 下 面 将 分 别 进行 介绍 。 

1. 合并 或 拆 分 单元 格 

合并 单元 格 ， 是 指 将 多 个 单元 格 合并 成 一 个 单元 格 ;而 拆 分 单元 格 则 是 指 将 一 个 单元 格 拆 
分 成 多 个 单元 格 ， 下 面 将 分 别 介绍 其 操作 方法 。 


网 页 布局 


如 合并 单元 格 : 在 网 页 编辑 中 ， 选 择 需 要 合并 的 单元 格 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 
中 选择 【表格 〗/【 合 并 单元 格 】 命 令 或 在 “属性 ”面板 的 左下 角 单 击 “ 合 并 所 选单 元 格 ” 
按钮 回 ， 将 其 进行 合并 。 


名 站 导航 
ET ET rT 


人 9 拆 分 单元 格 : 将 插入 点 定位 到 需要 拆 分 的 单元 格 中 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 
选择 【表格 〗/【 拆 分 单元 格 】〗 命 令 或 在 “属性 ”面板 中 单 击 “ 拆 分 单元 格 为 行 或 列 ” 按 
钮 申 ， 打 开 “ 折 分 单元 格 ” 对 话 框 ， 选 中 国 疝 荫 单 选 按 钮 或 回答 一 单 选 按钮 ， 在 数值 框 中 
输入 拆 分 的 行 数 或 列 数 ， 单 击 匡 本 E 辐 按钮 ， 完 成 拆 分 操作 。 


名 站 导航 ET 


2. 添加 或 删除 单元 格 
有 时 在 插入 表格 时 考虑 不 周全 ， 可 能 会 导致 插入 表格 的 行列 数 不 能 满足 插入 对 象 的 需求 ， 
此 时 可 通过 添加 或 删除 单元 格 的 方法 进行 弥补 。 下 面 将 分 别 介绍 添加 和 删除 单元 格 的 操作 方法 。 
(1) 添加 单元 格 
在 添加 单元 格 时 ， 可 以 一 行 或 一 列 的 添加 ， 也 可 以 多 行 或 多 列 的 添加 ， 以 提高 网 页 制作 的 
速度 。 下 面 分 别 介绍 其 操作 方法 。 
个 添加 单行 :将 鼠标 光标 定位 到 表格 中 要 添加 行 的 单元 格 中 ， 单 击 筷 标 右键 ， 在 弹出 的 快捷 
菜单 中 选择 【表格 〗】/【 插 入 行 】 命 令 即 可 。 


个 添加 单列 : 将 鼠标 光标 定位 到 表 格 中 要 添加 列 的 单元 格 中 ， 单 击 和 鼠标 右键 ， 在 弹出 的 快 
捷 菜单 中 选择 【表格 】/【 左 侧 插入 列 】 命 令 即 可 。 


笃 站 导航 


站 加 提示 
人 人 于 
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如 添加 多 行 或 多 列 : 将 筷 标 光标 定位 到 表格 中 要 添加 多 行 或 多 列 的 单元 格 中 , 单 击 息 标 右键 ， 
在 弹出 的 快捷 菜单 中 选择 【表格 〗】/【 插 入 行 或 列 】 命 令 ， 在 打开 的 对 话 框 中 选中 回 院 而 
单 选 按钮 或 回 制 本 j 单 选 按 钮 ， 在 “ 行 数 ”数值 框 中 输入 行 数 或 列 数 ， 再 设置 插入 的 位 置 ， 
单 击 匡 本 辐 按 钮 即 可 。 


(2 ) 删除 单元 格 
在 网 页 中 为 表格 删除 单元 格 的 操作 方法 与 添加 单元 格 的 操作 方法 基本 相同 ， 可 以 通过 右键 
菜单 命令 ， 或 选择 菜单 栏 的 菜单 命令 进行 操作 。 下 面 对 其 具体 操作 方法 进行 介绍 。 
但 通过 右键 菜单 删除 单元 格 : 将 筷 标 光标 定位 到 表格 中 要 删除 的 单元 格 中 ， 单 击 筷 标 右键 ， 
在 弹出 的 快捷 菜单 中 选择 【表格 】/【 删 除 行 】 或 【删除 列 】 命 令 即 可 。 
个 通过 菜单 栏 删除 单元 格 : 将 筷 标 光标 定位 到 表格 中 需要 删除 的 单元 格 中 , 选择 【修改 VA[ 表 
格 】〗】 命 令 ， 在 弹出 的 下 拉 列 表 中 选择 “删除 行 ”或 “删除 列 ” 命 令 即 可 。 


‖ 经 验 一 筹 乱 一 一 快速 删除 单元 格 


在 删除 单元 格 时 ， 可 直接 将 鼠标 光标 定位 到 需要 删除 的 单元 格 中 ， 按 ShiftrCtrl+- 组 合 键 快速 删 
除 单元 格 。 


3.1.4 ”设置 表格 属性 


在 创建 表格 时 已 基本 对 表格 的 属性 进行 了 设置 ， 如 果 需 要 更 全 面 的 设置 ， 可 选择 表格 后 ， 
在 “属性 ”面板 中 进行 设置 ， 或 使 用 CSS 样式 进行 设置 。 
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下 面 将 介绍 “属性 ”面板 中 各 参数 的 含义 。 

亿 “ 表 格 ”下 拉 列 表 框 : 用 于 设置 所 选 表格 的 命名 ， 以 备用 于 脚本 或 定义 CSS 样式 时 进行 
引用 。 

户 “ 行 ”和 “ 列 ” 文 本 框 : 用 于 设置 表格 的 行 数 和 列 数 。 

办 “ 宽 ” 文 本 框 及 其 后 的 下 拉 列 表 框 : 用 于 设置 表格 的 宽度 ， 其 后 的 下 拉 列 表 框 用 于 设置 单 
元 格 的 度量 单位 ， 如 像素 、 百 分 比 等 。 

加 “填充 ”文本 框 : 用 于 设置 单元 格 的 边界 和 单元 格 内 容 之 间 的 距离 ， 即 在 “表格 ”对 话 框 
中 所 对 应 的 则 是 “单元 格 边 距 ”文本 框 的 设置 。 

让 “间距 文本 框 : 用 于 设置 相 邻 单元 格 之 间 的 距离 ,在 “表格 ” 对话 框 中 对 应 “单元 格 间距 ” 
文本 框 的 设置 。 

让“ 对齐” 下 拉 列 表 框 : 主要 用 于 设置 表格 、 文 本 或 图 像 等 网 页 元 素 之 间 的 对 齐 方式 ， 但 只 


网 页 布局 
限于 和 表格 同一 段落 的 网 页 元 素 。 


和 “边框 "文本 框 用 于 设置 表格 边框 的 粗细 ,通常 设置 为 “0”, 如 果 特殊 情况 ,需要 设置 边框 ， 
则 会 通过 CSS 样式 实现 其 效果 。 

如 “类 ”下 拉 列 表 框 : 主要 是 让 表格 应 用 本 网 页 中 所 设置 的 CSS 样式 。 

办 图 、 困 和 国 按钮 : “属性 ”面板 中 的 图 按钮 是 指 清除 单元 格 的 行 宽 ， 即 单元 格 的 宽 
度 根 据 单 元 格 中 对 象 的 大 小 而 改变 ; 国 按钮 是 指 清除 单元 格 的 列 高 ， 即 单元 格 的 列 高 
同样 会 根据 单元 格 中 对 象 的 大 小 而 改变 ; 国 按 钮 是 指 将 表格 的 宽度 转换 成 百分比 ; 贺 
按钮 则 是 指 将 表格 的 宽度 转换 成 像素 。 


3.1.5 “设置 单元 格 的 属性 

在 表格 中 除了 可 设置 表格 的 属性 ， 也 可 对 单元 格 的 属性 进行 相应 的 设置 ， 其 方法 为 , 选择 
需要 设置 的 单元 格 ， 在 “属性 ”面板 中 即 可 进行 详细 的 设置 ， 如 单元 格 的 合并 和 拆 分 、 背 景 颜 
色 、 单 元 格 中 对 象 的 对 齐 方式 等 ( 见 上 图 ) ,或 单 击 “CSS” 按 钮 [Ess]， 在 “CSS” 属 性 面板 
( 见 下 图 ) 中 对 表格 的 文本 颜色 、 字 体 、 大 小 、 对 齐 方 式 以 及 页 面 属性 等 进行 设置 。 
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国 目 国宝 7 六 制作 “2014 年 日 历 ”网 页 


进一步 掌握 表格 的 创建 方法 。 进一步 掌握 表格 的 编辑 方法 。 
1 进一步 熟悉 单 元 格 的 属性 设置 。 | | 
下 面 将 制作 “2014rili.html” 网 [eves 因 oD- ox|E sms "ly 
页 ， 在 本 例 中 ， 首 先 在 空白 网 页 中 i 
插入 表格 ， 并 根据 需求 在 表格 中 添 马 到 成 功 Rs 
加 相关 内 容 ， 再 对 添加 内 容 的 表格 ED [本 WE 三 | [PE 
进行 编辑 ， 最 后 设置 表格 的 属性 ， aa 
其 最 终 效果 如 右 图 所 示 。 [EE EC ET EE OR 
有 EE 
蕊 100% ~ 
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Hour: 
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打开 “表格 ”对 话 框 


启动 Dreamweaver CS6， 创建 网 页 并 将 其 保 
存 为 “2014rilhtml”。 

2.， 将 鼠标 光标 插入 到 网 页 的 空白 处 。 

3 选择 【插入 】/【 表格 】 命令 ， 打 开 “ 表 格 ” 
对 话 框 。 


Ee 插入 表格 


在 打开 对 话 框 的 “ 行 数 ” 和 “ 列 ” 文 本 框 中 
分 别 输入 “8” 和 “7”。 

2. 在 “表格 宽度 ”文本 框 中 输入 “500”， 在 其 
后 的 下 拉 列 表 框 中 选择 “像素 ”选项 。 

3.， 在 “边框 粗细 ”文本 框 中 输入 “0”。 

4. 单 击 匡 栈 本 按钮 ， 完 成 表格 的 插入 。 


EE ES we 


本 而 合并 单元 格 

1. 在 表格 中 选择 第 一 排 的 2~5 个 单元 格 。 

2.， 在 "属性 ”面板 中 单 击 “ 合 并 所 选单 元 格 " 
按钮 回 。 使 用 同样 的 方法 合并 第 一 排 的 后 两 
个 单元 格 。 
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roe 拆 分 单元 格 


选择 第 一 排 的 最 后 一 个 单元 格 。 
2 在 “属性 " 面板 中 单 击 " 拆 分 单元 格 为 行 或 列 " 
按钮 贺 ， 打 开 “ 拆 分 单元 格 ”对 话 框 。 
3. 选中 回答 而 单 选 按钮 。 
RE 4.， 在 “ 行 数 ” 数 值 框 中 输入 “2”。 
Se sn | 5 单 击 EBEO 按 钮 完成 折 分 单元 格 操作 。 
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于 于 在 表格 中 添加 文本 


选择 第 1 个 单元 格 ， 输 入 月 份 “3” 
2. 选择 第 2 个 单元 格 , 输入 文本 己 到 成 功 o 
3. 选择 第 一 排 最 后 一 个 单元 格 ， 输 入 文本 
"2014”。 
4. 在 下 方 的 单元 格 中 输入 文本 “[ 农历 甲午 年 】。 


tb 


使 用 相同 的 方法 ， 在 表格 的 其 他 单元 格 中 输入 相 
应 的 文本 内 容 。 
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1. 在 表格 中 选择 需要 设置 为 一 种 颜色 的 单元 格 。 

2.， 在 “属性 ”面板 中 单 击 吕 号] 按钮 ， 切 换 到 
"CSS” 属 性 面板 中 。 打 开 “ 拆 分 单元 格 " 
对 话 框 。 

3.， 在 “大 小 ” 文本 框 后 单 击 国 按钮 ， 在 弹出 的 
颜色 面板 中 选择 红色 。 


本 新建 CSs 规则 


1. 打开 “新 建 CSS 规则 ”对 话 框 。 在 “选择 器 
名 称 ”文本 框 中 输入 “td_red”。 

2 单 击 ED 按钮 ， 完 成 CSS 规则 设置 。 

3. 返回 网 页 编辑 区 查看 效果 。 
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本 十 太吉 单元 格 的 肖 景 色 

1.， 在 表格 中 选择 第 2 排 的 第 1 个 和 最 后 1 个 单 
元 格 。 

2 在 “CSS” 属 性 面板 的 “背景 颜色 ”后 单 击 加 
按钮 ， 在 弹出 的 颜色 面板 中 选择 红色 。 


本 于、 设置 其 他 文本 的 颜色 和 背景 色 


使 用 设置 文本 颜色 和 单元 格 背 景色 的 相同 方法 为 表 
格 中 的 其 他 单元 格 设置 相应 的 颜色 。 
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丁丁 看 设置 字体 大 小 和 对 卉 方式 


1. 选择 表格 中 的 所 有 文本 ， 在 默认 的 “属性 ” 


面板 中 分 别 将 “水 平 ” 和 “垂直 ”设置 为 “ 居 
中 对 齐 ” 和 “居中 ”。 
2. 选择 文本 “ 马 到 成 功 ”， 在 默认 的 “属性 " 


面板 中 将 “格式 ”设置 为 “标题 1”。 


本 于 


选择 整个 表格 ， 在 “属性 ”面板 中 将 “边框 ” 设 


置 为 “1”， 按 Ctrl+S 组 合 键 进行 保存 ， je 
个 例子 的 操作 。 


tilillililill 


网 页 布局 
3.2 使 用 DIV+CSS 进行 网 页 布局 
在 网 页 中 使 用 DIV+CSS 进行 布局 ， 在 制作 网 页 时 不 仅 能 灵活 设置 各 种 属性 ， 还 能 对 网 页 
进行 轻松 的 修改 。 使 用 DIV+CSS 进行 网 页 布局 ， 也 是 目前 最 流行 的 一 种 布局 方式 ， 本 节 将 介 
绍 什么 是 DIV+CSS、CSS 盒子 模型 、DIV+CSS 的 定位 以 及 使 用 DIV+CSS 进行 布局 的 方法 。 


目 上 ED ------ 


驴 了解 什么 是 DIV+CSS。 QB 掌握 DIV+CSS 的 定位 方法 。 


! 掌握 CSS 盒子 模型 的 应 用 。 QQ 掌握 DIVHCSS 的 布局 方法 。 | | 


3.2.1 认识 DIV+CSS 
DIV+CSS 是 网 站 中 标准 的 常用 术语 之 一 ， 也 是 对 网 页 进行 布局 的 一 种 方法 ， 使 
DIV+CSS 可 使 整个 网 页 看 起 来 更 加 美观 且 具 有 层次 感 。DIV+CSS 是 由 DIV 标签 和 CSS 层 翅 
样式 表 组 成 。 下 面 将 分 别 对 其 进行 介绍 。 
从 DIV 标签 : 该 标签 是 HTML (HyperText Markup Language 的 缩写 ， 是 一 种 超 文本 标志 语言 
中 的 一 种 网 页 元 素 ， 通 常用 于 页 面 布 局 ， 在 HTML 代码 中 以 <div></div> 的 形式 存在 ， 在 
该 标签 之 间 可 以 添加 网 页 中 的 任何 元 素 ， 如 文本 、 段 落 和 图 像 等 ， 因 此 ， 可 以 将 该 标签 看 
成 为 一 块 容器 标签 。 
人 如 CSS 层 琶 样式 束 : CSS 层 登 样式 表 已 在 第 2 章 进行 了 介绍 ， 这 里 就 不 再 更 述 。 


3.2.2 ”插入 DIV 标签 


在 网 页 中 插入 DIV 标签 的 方法 其 实 很 简单 ， 直 接 将 插入 点 定位 到 需要 插入 DIV 标签 的 位 
置 ， 选 择 【 插入 】 /人 布局 对 象 】/【 Div 标签 】 命 令 ， 打 开 “ 插 入 Div 标签 ”对 话 框 ， 在 该 对 
话 框 中 可 设置 插入 的 位 置 、 类 名 、ID 名 以 及 新 建 CSS 规则 , 设置 完成 后 , 单 击 世 和 本 按 钮 即 可 。 
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下 面 将 对 “插入 Div 标签 ”对 话 框 中 的 各 参数 进行 介绍 。 

如 “插入 ”下 拉 列 表 框 : 主要 用 于 选择 DIV 标签 在 网 页 中 插入 的 位 置 ， 如 “在 插入 点 ”、“ 在 
开始 标签 之 后 ”和 “在 标签 结束 之 前 ”， 但 如 果 网 页 中 有 其 他 标签 ， 则 会 根据 情况 增加 或 
改变 选择 项 。 

胃 “类 ”下 拉 列 表 框 : 主要 用 于 选择 或 输入 DIV 标签 的 class 属性 ， 如 <div class="box"> 
</div>， 在 设置 CSS 样式 时 ， 则 选择 器 名 称 为 box。 

如 “ID” 下 拉 列 表 框 : 主要 用 于 选择 或 输入 DIV 标签 的 记 属 性 ， 和 class 的 属性 相同 ， 但 在 
代码 中 引用 设置 CSS 样式 时 ，class 属性 需要 在 选择 器 名 称 前 加 “#”; 而 这 属性 则 在 选 
择 器 名 称 前 加 “. ”。 

人 [要 按钮 : 单 击 该 按钮 可 直接 打开 “新 建 CSS 规则 ”对 话 框 ， 新 建 CSS 样式 。 


3.2.3 DIV+CSS 的 盒子 模型 


盒 模型 是 进行 DIV+CSS 布局 的 一 个 重要 概念 ， 在 网 页 布局 时 ， 只 有 掌握 了 盒 模型 的 原理 ， 
以 及 盒 模型 中 每 一 个 元 素 的 布局 方法 ， 才 能 熟练 地 通过 DIV+CSS 的 方法 对 页 面 中 的 元 素 进 行 
快速 定位 ， 以 及 设置 元 素 的 大 小 或 位 置 。 


1. 盒子 模型 的 概述 

盒子 模型 的 原理 就 是 将 页 面 中 的 元 素 
都 看 作 是 一 个 占据 一 定 空间 的 盒子 ， 它 由 
margin( 边界 ) border( 边框 ) padding( 填充 ) 
和 content ( 内 容 ) 组 成 ， 其 中 margin 位 于 最 content 
外 层 ， 是 指 容器 与 容器 之 间 的 距离 ，border 
位 于 边界 里 边 ，padding 位 于 中 间 ， 是 指 边框 
与 内 容 之 间 的 距离 ，content 位 于 最 里 层 ， 是 
指 内 容 与 内 容 之 间 的 距离 。 


border 


2. margin (边界 ) 
在 DIV 标签 布局 中 ，margin 表示 元 素 与 元 素 之 间 的 距离 ， 设 置 盒子 的 边界 距离 时 ， 可 以 
对 margin 的 上 、 下 、 左 和 右边 距 都 进行 设置 ， 用 户 可 以 直接 在 CSS 样式 面板 的 “ 方 框 ”中 进 
行 设置 。 下 面 将 分 别 介绍 margin 边界 的 具体 设置 。 
iop: 用 于 设置 元 素 上 边 距 的 边界 值 。 如 margin-top:10px: 表示 盒子 与 盒子 之 间 上 边 距 为 
10 像素 。 
个 bottom: 用 于 设置 元 素 下 边 距 的 边界 值 。 如 margin-bottom:10px; 表示 人 铭 子 与 盒子 之 间 下 
边 距 为 10 像素 。 
如 right: 用 于 设置 元 素 右边 据 的 边界 值 。 如 margin-right:10px: 表示 念 子 与 盒子 之 间 右 边 距 
为 10 像素 。 
如 left: 用 于 设置 元 素 左边 距 的 边界 值 。 如 margin-left10px: 表示 盒子 与 盒子 之 间 左 边 距 为 
10 像素 。 
需要 注意 的 是 ， 如 果 在 DIV 标签 中 没有 分 别 设置 各 边界 的 属性 ， 而 是 直接 设置 
margin:10px; 则 表示 上 、 下 、 左 和 右 的 边界 都 为 10 像素 ， 并 且 在 计算 元 素 的 大 小 时 ， 要 加 上 设 
置 各 属性 的 值 。 
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3. border (边框 ) 


在 网 页 中 ，border 设置 网 页 元 素 的 边框 ， 可 达到 分 离 元 素 的 效果 。border 除了 和 
margin 一 样 ， 可 以 设置 上 、 下 、 左 和 右 属 性 外 ， 主 要 还 可 以 设置 color、width 和 style， 下 面 分 
别 介绍 color、width 和 style 属性 的 设置 方法 。 
个 color: 主要 用 于 设置 border 的 颜色 ， 其 设置 方法 与 文本 的 color 属性 相同 ， 但 一 般 采 用 
十 六 进 制 来 进行 设置 ， 如 黑色 为 “#000000”。 
人 width: 主要 用 于 设置 border 的 粗细 程度 ， 其 值 包括 medium (默认 值 ， 一 般 情况 下 为 
2px ) 、thin ( 细 边 框 ) 、thick ( 粗 边框 ) 和 length (用 户 可 以 自行 定义 其 值 ) 。 
如 style: 主要 用 于 设置 border 的 样式 , 其 值 包括 dashed ( 虚线 边框 )、dotted ( 点 划 线 边 框 ) 、 
double ( 双 实 线 边 框 ) 、groov ( 雕刻 效果 边框 ) 、hidden ( 隐藏 边框 ) 、inherit ( 集成 上 
一 级 元 素 的 值 ) 、none (无 边框 ) 和 solid ( 单 实 线 边框 ) 。 


4. padding (填充 ) 

用 于 设置 content 与 border 之 间 的 距离 ， 其 属性 主要 有 top、right、bottom 和 left， 其 用 法 
与 margin 相同 ， 这 里 就 不 再 著述 。 

5. content 〈 内 容 ) 


在 网 页 中 ，content 即 盒子 包含 的 内 容 ， 就 是 网 页 要 展示 给 用 户 观看 的 内 容 ， 它 可 以 是 网 
页 中 的 任 一 元 素 ， 如 文本 、 图 像 等 。 


经 验 一 敌 乱 一 一 其 他 属性 


在 网 页 编辑 中 ， 不 管 是 margin、border 和 padding， 还 是 content， 上 述 所 介绍 的 都 只 是 它们 最 
常用 的 属性 设置 ， 如 果 要 查看 其 他 属性 ， 则 可 直接 在 CSS 样式 面板 中 进行 查看 。 


3.2.4 DIV+CSS 定位 


在 网 页 中 使 用 DIV 标签 进行 布局 时 ， 由 于 该 标签 的 灵活 性 较 强 ， 因 此 要 通过 一 些 定位 
属性 对 其 进行 固定 ， 一 般 而 言 定 位 属性 都 是 通过 设置 Position 的 属性 ( relative、absolute 和 
fixed ) 进行 定位 的 ， 但 也 可 以 通过 Float 进行 简单 的 定位 。 下 面 将 分 别 介绍 Position 和 Float 属 
性 的 含义 与 作用 。 


1. Position 属性 

Position 属性 包含 了 几 种 较为 常用 的 定 
位 方法 , 即 relative ( 相对 定位 ) 、absolute ( 绝 
对 定位 ) 和 fixed ( 悬浮 定位 ) 等 。 在 CSS 的 
规则 定义 对 话 框 中 选择 “定位 ”选项 ， 在 右 
侧 的 “Position” 下 拉 列 表 框 中 即 可 进行 设置 。 
下 面 将 分 别 介绍 这 3 种 定位 的 具体 用 法 。 
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人 各 relative (相对 定位 ) : 是 指 在 元 素 所 在 的 位 置 上 ， 通 过 设置 其 水 平 或 垂直 位 置 ， 让 该 元 
素 相 对 于 起 点 进行 移动 ， 可 通过 设置 上 (top) 、 左 (left) 、 右 (right) 和 下 (bottom ) 
的 属性 位 置 进行 定位 。 如 左 图 所 示 为 定义 DIV 标签 的 代码 图 ， 右 图 则 是 效果 图 。 


-boxi right 


‘box left 
i width:150px; 


{ 
height:150px; (63 To 
width:150px; 
background:#CFO; 
float:left; 

} 2 


如 absolute (绝对 定位 ) : 是 指 通 过 设置 Position 属性 的 值 ， 将 其 定位 在 网 页 中 的 绝对 位 置 。 
如 定义 名 为 “box left” 和 “boxl right” 的 DIV 标签 的 CSS 属性 ( 见 左 图 ) ， 在 预览 时 
则 可 从 中 看 出 对 “boxl_ right”DIV 标签 应 用 absolute 进行 定位 后 , 它 以 网 页 的 边界 为 起 点 ， 
向 下 移动 了 20px， 向 右 移动 了 30px ( 见 右 图 ) 。 


“box1 right 
t 


‘box left 
{ 


height :150px; Py 


width:150px; 
background:#CFO; 
float:left; 


如 fixed (悬浮 定位 ) : 是 指使 某 个 元 素 是 浮 在 上 方 ， 主 要 用 于 固定 元 素 位 于 页 面 的 某 个 位 
置 。 如 为 定义 名 为 “box_left” 和 “boxl right” 的 DIV 标签 的 CSS 属性 ( 见 左 图 ) ， 在 
预览 时 则 可 从 中 看 出 对 “box left”DIV 标签 应 用 fixed 进行 定位 后 ， 它 悬浮 在 “box]_ 
right”DIV 标签 的 上 方 ， 其 相对 于 “boxl right” 的 位 置 ， 向 下 移动 了 20px， 向 右 移动 了 


30px。 


"box left 


height:150px; "box1 right 


(65 To 150px; { 
ackground:#CFO; width:150px» 
height:150px; 
background:#C90; 


2. Float 属性 | 

可 设置 DIV 标签 的 浮动 属 TE | a | 
性 ， 使 其 相对 于 另 一 个 DIV 标签 进行 Ba | 
定位 。 在 CSS 的 规则 定义 对 话 框 中 选 | we iy 
择 “ 方 框 ” 选 项 ， 在 右 侧 的 “Float” | 
下 拉 列 表 框 中 即 可 进行 设置 。 但 在 显 Lam HE 7 vem 习 攻 本 
示 方 式 上 ， 可 设置 靠 左 显示 、 靠 右 显 
示 等 。 
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Float 主要 有 left、right 和 none 3 个 参数 ， 下 面 将 分 别 进行 介绍 。 


人 left: 主要 用 于 定位 于 金子 的 左 侧 。 -IEEE TREE 
~ > 
如 right: 主要 用 于 定位 于 盒子 的 右 侧 。 rp "heigher1s0px; 
wiath:150px; :150px; 
大 none: 不 进行 定位 。 background: #CFO; en 
float:lefr; float:left; 


“boxl_right 
t 


width:150px; 
height:150px; 
background:#C90; 
float:right; 


3.2.5 ”DIV+CSS 布局 


在 掌握 了 DIV+CSS 定位 的 方法 后 ， 用 户 还 应 该 掌握 如 何 使 用 DIV+CSS 进行 布局 的 常 
的 一 些 技巧 ， 如 让 定义 的 DIV 标签 的 高 度 根据 标签 内 的 内 容 变化 、 让 定义 的 DIV 标签 在 网 页 079 
中 进行 居中 显示 和 首 字 下 沉 等 。 下 面 将 分 别 进行 介绍 

1. 设置 DIV 标签 的 自 适 应 高 度 

在 编辑 网 页 时 ， 如 果 对 每 个 DIV 标签 都 设置 了 高 度 ， 在 不 同 的 浏览 器 中 显示 会 很 难看 ， 
为 了 适应 各 种 浏览 器 的 百分比 ， 则 可 在 盒子 模型 中 不 设置 高 度 ， 它 默认 会 相对 于 浏览 器 的 百 分 
比 进行 调整 。 62 
下 面 将 创建 一 个 空白 网 页 “div.html”， 在 网 页 中 插入 3 个 DIV 标签 ， 并 在 相应 的 DIV 标 “@ 
签 中 添加 相应 的 内 容 ， 以 显示 自 适应 高 度 的 DIV 标签 效果 ， 其 具体 操作 如 下 : 


本 丁丁 如 并 保存 网 页 


在 Dreamweaver CS6 中 创建 一 个 空白 网 页 ， 并 
将 其 保存 为 “div.html”。 


~ We 
mm 本 本 本 括 入 DIV 标 答 
Ee 1， 将 鼠标 光标 定位 到 网 页 的 空 折 区域。 ww 
oa 2 选择 【 插入 】/ 布局 对 象 ]/【 Div 标签 ] 命令 ， 全 
下 Lee | “插入 Div 标签 ”对 话 框 。 
| Gi 打开 “插入 Div 标签 ”对 话 框 
| | 个 和 "ORV a 
masa | 了。 在 弹出 的 下 拉 列 表 中 还 可 以 看 到 ， | 
| | 还 存在 “AP Div” 选 项 ， 该 选项 也 是 层 ， 唯 一 | 22 
ES 。 不 同 的 是 Ap Div 在 布局 时 ， 更 加 灵活 ， 可 以 | He 
“ 宫 “ 虹 8 站。 随处 移动 ， 而 DIV 标签 相对 于 AP Div 而 言 其 
' Bs] | 移动 性 没 那么 强 。 | 


区 证 启 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


AGE 最 设置 标签 的 类 


1. 


在 打开 对 话 框 的 “类 ”下 拉 列 表 框 中 输入 
Class 属性 名 “box_main”。 

单 击 [ses 按钮， 打开“ 新 建 CSS 规则 ” 
对 话 框 ， 保 持 默 认 设置 。 

单 击 匡 可 刁 按钮 。 


本 丁丁 设 DV 标签 的 大 小 


于 


在 打开 的 对 话 框 中 “分 类 ”列表 框 中 选择 “ 方 
框 ”选项 。 


2.， 在 右 侧 窗 格 中 分 别 将 “Width” 和 “Height” 


设置 为 “800” 和 “600”。 


Bottm B) ， 
LR : [el 


EA J 


迹 择 器 类 型 - 
为 SSs 规 WMW 和 择 上 下 文选 择 器 类 型 。 
类 (可 应 用 于 任何 JIWL 元 素 》 了 


Wotm) : 
ees 


RE 二 设置 DIV 标签 的 边框 

1 在 “分 类 ”列表 框 中 选择 “边框 ”选项 卡 。 

2。 在 右 侧 窗 格 中 ， 分 别 将 “Style”、 “Width” 
和 “Color" 设置 为 “Solid” 、"1" 和 “#F0C" 。 

3。 依次 单 击 忆 酉 二 按钮 ， 完 成 一 个 DIV 标签 的 
设置 ， 并 将 其 DIV 标签 的 内 容 删 除 。 


EE 添加 其 他 两 个 DIV 标签 


使 用 相同 的 方法 ， 分 别 创建 另外 两 个 DIV 标 
签 ,分 别 将 其 Class 命 名 为 “box_left" 和 "box_ 
right”。 

2.， 分 别 将 “box_left” 标 签 的 “ 宽 ” 和 “高 ” 设 
置 为 “200px” 和 “600px”， 其 “边框 ” 设 
置 为 “Solid 1#9F6”，"“float" 设置 为 “left”。 

3. box_right" 标签 的 “ 宽 " 设置 为 “596px”， 

“边框 ”设置 为 “Solid 1 帮 F0”， 
os “left 


“float” 


2. 设置 网 页 居中 效果 


在 网 页 中 添加 的 DIV 标签 ， 在 默认 情况 下 都 是 左 对 齐 的 ， 但 是 在 各 种 网 站 中 浏览 的 网 页 一 
般 都 是 居中 对 齐 的 ， 因 此 要 将 布局 的 网 页 进行 居中 设置 可 以 通过 两 种 方式 进行 设置 ， 分 别 为 


margin 和 position。 下 面 将 分 别 进行 介绍 。 
但 margin 居中 布局 : 在 DIV 标签 中 ， 直 接 将 margin 的 属性 设置 为 “0px auto” 即 可 。 


acht500P: 
heloht: S00px: 


/style> 
</head> 


个 position 居中 布局 : 使 用 该 方法 进行 布局 ， 其 实 是 结合 了 相对 定位 与 负 边 距 的 方法 达到 效 
果 的 ， 其 原理 是 : 通过 设置 DIV 标签 的 position 属性 为 “relative”， 然 后 使 用 负 边 距 抵消 
边 距 的 偏 移 量 ， 其 中 负 距 离 要 根据 DIV 标签 的 具体 大 小 进行 计算 。 


marglniOpx auco; 
backgzound :fgE97 
widehi500Pxi 


</aryle> 
</head> 


EET 
ET 加 


3. 设置 首 字 下 沉 

在 网 页 中 和 Word 文档 编辑 一 样 ， 也 可 设置 首 字 下 沉 ， 网 页 中 设置 首 字 下 沉 也 是 想 吸 引 浏 
览 者 的 注意 ， 以 增加 网 站 的 点 击 率 。 设 置 首 字 下 沉 的 方法 很 简单 ， 只 需 将 要 设置 首 字 下 沉 的 文 
字 放 在 标签 <span></span> 中 ， 再 为 标签 <span> 新 建 CSS 样式 ， 将 其 字体 、 字 号 和 定位 方式 
进行 相应 的 设置 即 可 。 


E 
9 = 
Css 也 交 无 -~ 脸 | 


62 
“@ 
办 
52 《 
Hour: 
人 
42 《 
Hour: 
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Hour: 
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三 攻 语 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


国 目 四 ER 制作 花 店 网 页 


G 进一步 掌握 DIV 标签 的 插入 方法 。 G 进一步 掌握 DIV+CSS 的 定位 操作 。 


I 
1 人 S 进一步 熟悉 CSS 盒子 模型 。 久 进一步 掌握 DIV+CSS 布局 操作 。 | | 
I 


下 面 将 制作 “flowes.html” 网 页 ， 首 先 在 新 建 的 空白 区 域 插入 DIV 标签 进行 布局 ， 再 使 
DIV+CSS 对 插入 的 标签 进行 布局 ， 最 后 对 DIV 标签 添加 CSS 样式 ， 让 添加 的 标签 进行 定 
位 并 设置 相应 的 属性 ， 其 最 终 效 果 如 下 图 所 示 。 


花语 是 各 国 、 各 民 高 根据 各 种 植物 ， 记 拱 是 花 杠 的 特点 、 
习性 和 传说 典 放 ， 冉 也 的 各 种 不 网 的 人 性 化 旭 三 意义 * 


去 
器 
上 
口 

© 


花语 最 早起 关于 古 祖 脐 ， 那 小时候 不 目 是 花 ， 叶 于、 果树 
都 有 一 定 的 含义 。 


和 。 丰 正 花语 虞 行星 在 法 国生 室 9 类， 要 族 们 格 民 大 时 于 让 放 
的 次 村 区 开 身 周 ， 里 面 就 包括 了 花 二 的 信息 = 


欢迎 光 竺 我 们 的 网 站 


全 六 吉星 Smile 。 fiower 王 培 ! 委 逢 多 在 我 们 的 出 直 六 名 扫 彩 符合 舍 白 己 咏 天 的 开 
二 其 移入 从 

合生 和 我。 过 上 作 雪 我 今生 冯 大 六 覃 大 | 基 如 六 汪 和 - 生 全 委 我 过 拓 丙 六 关 玫 ， 和 你 
在 一 站 名 我 扫 本 党， 入 有 闪 执 我 扩 当 一 所 渤 夫 丁 般 搓 近 苦 。 电 入 号 光 术 玫 的 和 了 
支 大 的 世 再 和 本省 的 王 汉 于 人 六 入 ， 医 丁 、 法 从、 方 生 其 灾 洗 和 拓 ， 百合。 再 条 入 
等 区 百合 有 加 吴 雪 多 委 芍 类 瑟 翁 人 ”不同 全 于。 只 可 三 系 天 不 可 训 基 对 利 、 心 笃 
各 臣 、 厂 短 二 全 、 百 于 其 合 。 


se 插入 DIV 标签 
新 建 一 空白 HTML 网 页 文档 ， 将 其 保存 为 
“flowers.html” 

2.， 将 插入 点 定位 到 网 页 的 空白 区 域 中 。 

3. 选择 [插入 】/[【 布局 对 象 ]/【 Div 标签 ] 命令 ， 
打开 “插入 Div 标签 ”对 话 框 。 


Tt 设置 DIV 标签 
在 打开 对 话 框 的 “类 ”下 拉 列 表 框 中 输入 
“main”。 
2 单 击 [E50 校 钮 打开“ 新 建 CSS 规则 
对 话 框 ， 其 他 保持 默认 设置 。 
3， 依次 单 击 后 三 本 按钮 ， 返 回 到 网 页 编辑 区 ， 
查看 插入 的 第 一 个 DIV 标 答 。 


醒 醒 而、 添加 其 他 两 个 DIV 标签 


1.， 在 网 页 编辑 区 中 ， 将 第 一 个 DIV 标签 中 的 内 


| ES 
a J 0) 术 ) 


容 删 除 ， 将 插入 点 定位 到 DIV 标签 中 。 
2. 使 用 相同 方法 依次 插入 4 个 DIV 标签 ， 
并 分 别 命 名 为 “main_head” 、 "main_ 
banner”、 
bottom” 


"main_center” 
， 切 换 到 “代码 ”视图 查看 效果 。 


TT PR 


和 “main_ 


Dw 到 
村 


| 
] 


' 
TXTT eole AFB) 


89| 电量 辐 国 | 总 二 | 时 中 各 | 关口 | 四 


g 
和 
| 
是 
思 


i 编辑 CSS 样式 


按 Shift+F11 组 合 键 ， 打 开 “CSS 样式 ” 面 
板 ， 单 击 [后 按钮 ， 在 打开 的 下 拉 列 表 框 中 选 
择 “main” 样 式 。 

2.， 在 “CSS 样式” 的 “.main” 属 性 选项 卡 下 单 
击 国 按钮 ， 展 开 “ 方 框 ” 选 项 。 

3 分别 将 “width” 和 “margin” 的 属性 设置 为 
"887px” 和 “auto”。 


‘STEP 05:— 编辑 其 他 CSS 样式 


使 用 相同 的 方法 为 其 他 CSS 样式 进行 
编辑 ， 编 辑 完成 后 ， 切 换 到 “代码 ” 视 
图 中 即 可 查看 到 所 有 CSS 样 式 的 代码 。 


42 《 
Hour: 
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Hour: 


让 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


‘STEP 06: 制作 main_head 标签 


号 


er 


选择 “ 拆 分 ”选项 卡 ， 将 插入 点 定 
位 到 <div class="main_head"></ 
div> 标签 之 间 ， 使 用 插入 DIV 标签 
的 方法 插入 三 个 DIV 标签 ， 分 别 命 
名 为 “main_head logo” 、“main_ 
head_menu” 和 "cleaner”。 

在 不 同 的 DIV 标签 中 嵌 套 其 他 标签 以 
及 输入 内 容 。 


格 治 式 ” 下 拉 列 表 框 的 “标题 1” 和 


Ce 


EE 


在 制作 min hend DR 时， 所 插入 的 其 他 DIV 标签 中 所 使 用 到 的 hl 和 2 样式 与 “属性 ” 面板 | 
“标题 2” 选 项 所 对 应 ,而 “<ul><li></li></ul>” 标 签 表示 列表 项 目 ，) 
和 “列表 项 ” | 


TE 制作 main_banner 标签 


1. 


在 main_banner 标签 分 别 添加 DIV 标 
签 ， 将 其 退 套 在 main_banner 标签 中 。 
将 插入 点 定位 到 “main_banner_righ” 
DIV 标 签 中 ， 输 入 <img src="images/ 
bh.jpg" alt="flower" /> 插入 图 片 。 


wn hm 


1 a ta) ] 
a per Tor 和 rs 
可 二 div ea 了 和 
ES “oatn_panner et Pon 
4 <p> 论 1 

馆 剖 李 本 和 各 导轨， 天 站 是 下方 的 人 点 
半 ,习性 和 传说 典 由 ,号 予 的 各 种 不 有 

的 人 性 化 介 全 生 灾 ， /p> 
72 air> 

13 atv class= 

“main_panner_ left newaw> 
| ne 
ls 
四 区 
国 于 py 花语 

痢 脐 ， 部 个 时 候 不 下 是 花 于 、 果 
ee 树 孝 有 一 定 的 本 义 * </e 半 
Bl Cdlv> 
sn /div> 
ey Ge ore tlre 


bt) iv mls emer Ti VA 0 -| 


签 中 输入 文本 。 


[| 


‘STEP 09:— 制作 main_center 标签 


标签 


1.， 将 插入 点 定位 到 “main_center” 
分 别 媒 套 多 个 DIV 标签 。 


人 


MASTER 085 。 论 入 内 容 


将 插入 点 定位 到 “main_banner 
_left_news”DIV 标签 中 。 输 入 
分 段 标 签 <p></p>， 并 在 该 标 


绚 - 在 “设计 ” 视图 中 
ba DIV 标签 设置 大 小 时 ， 
并 不 好 定位 光标 ， 则 可 切换 到 
“代码 "视图 中 进行 快速 定位 。 | 


匡 


2， 在 “main_center_left” 标 签 中 分 别 嵌 套 多 


个 DIV 标签 ， 


分 别 在 “main_center left_ 


tittle” 标 签 中 输入 “ 著 薇 ”和 “ 勿 忘我 ”。 


-Tel x 


Dw 
EE 制作 box1_center 标签 Sum Bad EW A RN WO) es ws en mn 


| 
1.， 在 “box1_center tp” 标签 中 插入 图 片 “qw. 


RS Le i ET 和 


jpg”， 切 换 到 “代码 ”视图 查看 其 代码 。 元 二 
2 在 “main_center_left_content”DIV 标 签 中 St 
输入 文本 。 


< 
> 扩 二 本 的 花语 


Pe | | 


ur /> 日 凋 条 的 古训 时 一 
并 二 的 要 喇 


or /> 区 获准 的 花 汪 是 一 
来 但 的 高 关 


* 9 阅 加 [We [| 号 el 


* ， | ; 
ba yey [靖国 面 闸 ,两 919K74 种 酮 ae 


8 | 所 六 由 更 扣 图 本 Pr 
‘STEP 11:— 制作 其 他 box1_center 标签 F 1 


= 
1.， 在 “box1_center_tp" 标签 中 插入 图 片 “www. 085 
jpg”， 切 换 到 “代码 ”视图 查看 其 代码 。 
2， 在 “main_center_left_content”DIV 标 签 中 全 


/> 请 不 要 忘记 我 直 话 的 爱 ~ 
7> 请 理念 和 和 ， 患 贞 的 硕 理 一 切 
忘记 和 真诚 的 爱 
/> 者 还 们 有 了 虹 ， 请 相 记 约 ， 各 只 一 EE 


输入 文本 。 


ETIOTTDEY CT 9 


/生计 同人 归来 六 会 再 次 归 太 给 你 在 福 


62 € 
Hol 
i 本 制作 main_center_right 标签 ^ 
使 用 相同 的 方法 和 能 套 DIV 标签 ， 并 在 标签 中 添加 
av els ee | 其 他 HTML 标签 ， 并 在 标签 中 添加 图 片 和 文本 。 


etoacroa Dano mmordtn et Ie TT 分 别 在 “代码 ”和 “设计 ”视图 中 查看 效果 。 


葵 避 


"96" haxghc=wlllw 


"95" hetghe-"illw 


52 
本 Hour 
ET ~“ 


"97" helghc="109" c: 
/dry 
div eo 1 
dlv clas 
a 
区 光 信 Sna le zurn2 eure 网 沾 ! 新 户 信 在 我们 的 同 让 


全 的 和 和 和 一 上 二 二 了 次 二 的 租 。 壮 凡 ; 二 次 村 几 的 和 以 视 大 的 必 向 和 妆 人 
的 要 情 与 人 交往， 加 各 、 当 傅 、 富 中 、 泪 华 届 ， 百 白 : 肆 所 从 的 百合 有 42 
和 如同 角 兴 将 的 革 硬 性 人 ， 不 间 企 事 ， 只 可 近 观 而 不 可 讲 辽 ”上司 利 、 心 想 事 号 Hour 
祝福 ， 高 奥 、 百 年 好 全 从 

</p> 
/diw> 
atw class="rignt_ pg">c/div> 


Mietssee furniture 网 站 ! 希 竺 您 在 我 们 的 网 站 中 能 找到 符合 你 自己 需要 的 花 品 


和信 大 的 守 当 六 和 的 本 季 轴 怕 晤 各 珊 科 宙 抽 交 守 、 和 
。 牡丹， 喜欢 性 丹 的 人 以 襄 大 的 心 陶 和 南 ! 人 区 柱 。 图 满 


E 


ilaanernycydiv> 


| 所 各 名 人 QD 同 JR[F] 守 亏 帽 中 二 


OY Civ NY Gv pon center> ED ied Or-8) 


ee ; 
Va So ROA -加 Sv WK A 种 WII Ue) 
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地 人 和 的 局; 坦 估 是 类 大 出 宣 二 a 人 
* EE 制作 main_bottom 标签 

癌 

可 让 a [ne 切换 到 “ 拆 分 ”视图 中 ， 将 插入 点 定位 到 <div 

qo | class="main_bottom"> </div> 标签 中 ， 输 入 文本 

E ooaas 国医 

加 eh 人 “Copyright 2014 Smile Flowers”。 完 成 整个 

DIV 标签 布局 。 5 
可 个 
Es : "| 0 

a ir > or 
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NE 语 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


AGE 外 部 css 样式 


1.， 按 Ctrl+S 组 合 键 进行 保存 一 次 , 将 “flowers_ 
style”CSS 样式 文件 复制 到 与 “flowers. 
html” 网 页 同一 级 的 文件 夹 中 。 

2. 打开 “CSS 样式 ”面板 ， 在 其 右 下 角 单 击 “ 附 
加 样式 表 ” 按 钮 区 


es, 链接 外 部 CSS 样式 


打开 “链接 外 部 样式 表 ” 对 话 框 ， 在 “文件 /URL” 下 


拉 列 表 框 后 ， 单 击 EBE 本 按钮 。 


2.， 在 打开 对 话 框 的 “查找 范围 ”下 拉 列 表 框 中 查找 到 网 页 


所 在 的 位 置 ， 在 下 方 的 列表 框 中 选择 CSS 文件 。 
3. 依次 单 击 匡 本 到 按钮 ， 完 成 CSS 2 


0 术语 国名 民 I5 从 各 补 呈 n. 
训 上 他， A 
De 那 了 时 从 不 止 4 
NS 


和 本 且 E 基 于 古 前 有 .站 人们 下 


[WaS 可 夯 E25 


LIL 


m 一 ”上 
aa mi 


pe 与 网 页 同一 级 文 | 
了 避免 在 网 页 所 在 的 文件 天 移动 后 ， 


在 浏览 时 出 现 链接 错误 。 


站 点 模 邓 
了 点 和 可 


WED 效果 


1. 在 网 页 编辑 区 , 按 Ctrl+S 组 合 键 进行 保存 后 ， 
单 击 励 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 “ 预 
览 在 IExplore” 选 项 。 

2. 打开 IE ba 即 可 预览 其 效果 。 


网 页 布局 
3.3 ”使 用 框架 进行 网 页 布局 


在 一 个 完整 的 网 站 中 ， 不 仅仅 包括 浏览 器 中 所 浏览 的 网 页 ， 还 包括 管理 网 页 数据 的 后 台 ， 
在 Dreamweaver CS6 中 可 通过 框架 的 方法 制作 后 合 页 面 。 本 节 将 对 框架 和 框架 集 的 创建 、 保 存 、 
IFrame 框架 的 使 用 以 及 属性 设置 进行 详细 的 介绍 。 


BEE ------ 


了 解 框架 及 框架 集 。 学 握 框架 集 及 框架 的 属性 设置 。 
1 Q 熟悉 框架 网 页 的 创建 方法 。 熟悉 IFrame 框架 及 属性 设置 的 方法 。 


3.3.1 认识 框架 及 框架 集 


在 框架 网 页 中 主要 包括 框架 及 框架 集 两 部 分 。 其 中 ， 框 架 记 录 的 是 具体 的 网 页 内 容 ， 每 个 
框架 对 应 一 个 网 页 ; 框架 集 则 记录 的 整个 框架 页 面 中 各 框架 的 信息 ， 如 框架 的 布局 、 在 页 面 中 
的 位 置 和 大 小 等 ， 并 且 一 个 框架 集中 包括 如 下 图 所 示 的 3 个 框架 ( top.html、left.html 和 main. 
html ) 。 
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left. html 3 各位 深交 站 设 要 易 记录 请 开刀 大 全 全 讼 当 半身 全 


3.3.2 ”创建 框架 网 页 

在 Dreamweaver CS6 中 创建 框架 网 页 时 ， 通 常 可 从 “新 建文 档 ” 对 话 框 中 创建 基本 的 框 
架 结 构 ， 然 后 根据 需要 手动 拆 分 出 新 的 框架 ,或 在 框架 中 髓 套 框架 ， 下 面 分 别 进行 介绍 。 

1. 创建 基本 框架 网 页 

基本 框架 结构 即 Dreamweaver CS6 中 提供 的 默认 框架 结构 ， 一 般 情况 下 ， 使 用 基本 框架 
结构 即 可 满足 网 页 制作 需求 。 下 面 将 以 在 空白 网 页 中 创建 框架 网 页 为 例 进行 介绍 ， 其 具体 操作 
如 下 : 


32 《 
Hour: 
从 
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AGE 全 新建 空白 网 页 


新 建 一 个 空白 HTML 网 页 , 选择 [ 插入 ][ HTML 】 
外 [框架 】/【 上 方 及 下 方 】 命令 ， 打 开 “ 框 架 标 
签 辅助 功能 属性 ”对 话 框 。 


机 本 指定 框架 标题 


在 打开 的 对 话 框 中 可 指定 框架 标题 ， 这 里 保持 默 
认 设 置 ， 单 击 匡 可 天 按钮 完成 框架 网 页 的 创建 。 
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2. 手动 拆 分 框架 
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为 每 一 林 架 写 正 一 个 标题。 
地 可 IbottonFr wne = 
是 bottonFrane 


如果 左手 和 对象 时 二 起 输入 此 翁 衣 
， 知 更 长- 辅助 功 凡 " 首 寺 全数 。 
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机 
创建 的 框架 网 页 显示 如 左 图 所 示 ， 其 中 包括 上 、 
下 两 个 框架 。 由 于 还 未 指定 相应 的 网 页 ， 因 此 各 
框架 中 的 内 容 部 分 为 空白 。 


根据 实际 需要 ， 可 在 基本 框架 结构 的 基础 上 拆 分 出 合适 的 框架 结构 。 其 方法 为 : 将 鼠标 光 
标 放置 在 需要 调整 的 框架 边框 线 上 ， 按 住 Alt 键 的 同时 拖 动 鼠标 至 合适 的 位 置 ， 然 后 释放 鼠标 


左 键 即 可 将 框架 拆 分 为 两 个 框架 。 


网 页 布局 
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3. 其 套 框架 

殴 套 框架 就 是 根据 网 页 的 实际 需求 在 框架 内 部 再 创建 框架 。 其 方法 为 : 将 插入 点 定位 到 需 
找 套 框架 的 框架 中 ， 选 择 【插入 】/【 HTIML 】/【 框架】 命令 ,在 弹出 的 子 菜单 中 选择 需要 的 
框架 命令 后 ， 在 打开 的 对 话 框 中 设置 框架 标题 并 单 击 匡 右 刁 按 钮 即 可 。 


Dw 
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‖ 经 验 一 敌 乱 一 一 查看 框架 结构 


在 Dreamweaver 的 编辑 区 中 不 太 容易 确定 框架 网 页 的 框架 结构 ， 这 里 可 按 Shift+F2 组 合 键 打开 
“框架 ”面板 ， 在 其 中 可 快速 且 直 观 地 查看 框架 网 页 的 框架 结构 。 


3.3.3 选择 框架 和 框架 集 
对 框架 及 框架 集 进 行 属 性 设置 和 框架 拆 分 等 操作 时 ， 应 先 选择 框架 或 框架 集 ， 才 能 进行 相 
应 的 操作 。 选 择 框架 和 框架 集 的 方法 其 实 很 简单 ， 但 都 需要 打开 “框架 ”面板 。 下 面 分 别 介绍 
选择 框架 和 框架 集 的 方法 。 
加 选择 框架 ; 在 “框架 ”面板 中 ， 将 鼠标 光标 移动 到 要 选择 框架 的 内 部 后 ， 单 击 左 键 即 可 先 
择 该 框架 。 
大 选择 框架 集 : 在 “框架 ”面板 中 ， 将 鼠标 光标 移动 到 要 选择 框架 集 的 边框 线 上 后 ， 单 击 左 
键 即 可 选择 框架 集 。 


9 语 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


上 经 验 一 筹 乱 一 一 判断 选择 了 某 个 框架 或 框架 集 


当选 择 了 某 个 框架 或 框架 集 后 ， 在 编辑 区 中 该 框架 或 框架 集 四 周 将 会 以 虚线 表示 ， 在 “框架 ” 
面板 中 框架 或 框架 集 边框 内 侧 则 有 较 粗 黑色 线 框 。 


3.3.4 ”保存 框架 和 框架 集 

一 个 框架 网 页 中 至 少 包含 一 个 框架 集 及 多 个 框架 ， 在 制作 时 , 用 户 可 以 选择 保存 单个 框架 ， 
也 可 以 选择 保存 框架 集 ， 或 一 次 性 保存 所 有 文档 。 下 面 将 分 别 对 其 保存 方法 进行 介绍 。 

1. 保存 单个 框架 网 页 

保存 单个 框架 网 页 的 方法 比较 简单 ， 将 鼠标 光标 定位 到 单个 框架 中 ， 再 选择 【文件 ] 作 保 
存 框架 】 命 令 或 按 CtrltS 组 合 键 ， 如 果 该 框架 中 的 网 页 文档 未 被 保存 过 ， 则 会 打开 “另存 为 " 
对 话 框 ， 设 置 保存 路 径 和 保存 名 称 后 ， 单 击 EE 旺 ga 按钮 即 可 完成 保存 操作 。 


他 在 QI 本 珊 面 


| 经 验 一 黎 乱 一 一 保存 技巧 


对 框架 网 页 文档 进行 首次 保存 时 ， 最 好 将 
每 个 框架 先进 行 单独 保存 ， 这 样 在 保存 框 
paw ea 架 集 时 则 不 容易 出 错 。 如 果 在 选择 框架 或 
ht 四。 TREE ES 框架 集 时 ， 不 知道 选择 是 否 正确 ， 也 可 以 
和 在 “框架 ”面板 中 进行 查看 ， 因 为 在 选择 
Ukente frat 本 TI 末 有 有 - Em 框架 或 框架 集 时 会 同步 显示 选中 的 状态 。 


回电 条 tniewds 蔡 名 Go 司 ) [SEE 和 


2. 保存 框架 集 

在 保存 单个 框架 网 页 后 ， 则 可 顺利 将 框架 集 进行 保存 ， 其 方法 同 保存 单个 框架 网 页 一 样 ， 选 择 
框架 集 后 ， 然 后 再 选择 【 文件 】/【 保存 框架 】 命 令 或 按 Ctrl+S 组 合 键 ， 在 打开 的 对 话 框 中 设置 保 
存 路 径 及 保存 名 称 ， 单 击 医 @a 按 钮 即 可 完成 保存 操作 。 


3. 保存 所 有 文档 

保存 所 有 文档 是 指 在 没有 保存 单个 的 框架 或 框架 集 时 ， 使 用 “保存 全 部 ”命令 将 其 进行 一 
次 性 保存 。 但 在 保存 时 ，Dreamweaver CS6 同样 默认 先 保存 框架 集 ， 保 存 框架 集 后 ， 再 对 单个 
框架 进行 保存 。 
下 面 将 以 保存 上 方 及 左 侧 嵌 套 框架 为 例 ， 介 绍 其 保存 所 有 文档 的 方法 ， 其 具体 操作 如 下 : 


本 本 村 iJ 开 “另存 为 " 对 活 杠 

1. 新 建 上 方 及 左 侧 嵌 套 框架 基本 框架 网 页 后 ， 
分 别 在 各 个 框架 中 输入 任意 文本 。 

2.， 选择 [ 文件 /A[ 保存 全 部 命令 , 打开 "另存 为 ” 
对 话 框 。 


Ti 保存 框架 集 网 页 文档 


在 打开 对 话 框 的 “保存 在 ”下 拉 列 表 框 中 选 
择 选 择 保存 位 置 。 

2， 在 “文件 名 ”下 拉 列 表 框 中 输入 文件 名 
"index”。 

3.， 单 击 匡 通天 按钮 ， 将 提示 该 框架 集中 包 
括 3 个 框架 ， 是 否 复制 到 相同 路 径 下 ， 单 
击 攻 区 按钮 即 可 。 
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i 保存 框架 文档 


在 打开 对 话 框 的 “保存 在 ”下 拉 列 表 框 中 选 
择 选择 保存 位 置 。 
2. 在 “文件 名 "下 拉 列 表 框 中 输入 文件 名 "right” 。 
3. 单 击 匡 通 名 到 按钮 ， 打 开 “ 另 存 为 ”对 话 框 。 


桓 丁 而。 保 存 其 他 框架 文档 


使 用 相同 方法 ， 在 打开 的 对 话 框 中 设置 框架 的 保 
存 路 径 、 名 称 。 保 存 完成 后 ， 即 可 在 路 径 文件 夹 
中 查看 到 保存 后 的 各 个 框架 网 页 
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问 : 在 创建 的 框 集中 如 何 删 除 不 想 要 的 框架 及 谋 套 框架 集 呢 ? 
答 : 若 要 删除 框架 ， Dw a . [Sa 
可 将 鼠标 光标 移 到 需 SN NO 


UniiliedFrameset -x 
EE .Dh 


要 删除 框架 的 边框 线 上 ， 按 住 鼠标 左 键 ， 将 
其 拖 至 页 面 外 释放 鼠标 左 键 即 可 ; 如 果 要 删 
除 谋 大 框架 集 ， 其 方法 相同 ， 只 是 需要 将 鼠 
标 光标 移 到 需要 被 删除 的 嵌 套 框架 集 上 进行 
拖 动 操作 。 但 需要 注意 的 是 ， 在 删除 框架 或 
嵌 套 框架 集 后 ， 原 框架 对 应 的 网 页 文档 仍然 
存在 ， 如 果 不 需 要 框架 或 框架 集 对 应 的 网 页 
文档 ， 应 在 删除 框架 或 框架 集 的 同时 ， 将 网 
页 文件 夹 中 相应 的 网 页 文档 删除 ， 以 减少 空 
间 的 占用 率 。 


3.3.5 ”框架 及 框架 集 的 属性 设置 
在 网 页 编辑 区 中 插入 了 框架 或 框架 集 后 ， 则 可 在 下 方 的 “属性 ”面板 中 设置 框架 或 框架 集 
的 属性 ， 如 设置 名 称 、 源 文件 、 空 白 边 距 、 滚 动 特性 、 大 小 特性 以 及 边框 特性 等 。 当 然 选择 不 
同 的 框架 和 框架 集 ， 其 属性 面板 的 选项 也 有 所 不 同 。 下 面 将 分 别 介绍 框架 集 以 及 框架 的 属性 设 
置 操作 。 

1. 框架 的 属性 设置 

在 框架 集中 ， 选 择 插入 的 框架 ， 便 可 在 


编辑 区 下 方 查看 到 所 选 框架 的 “属性 ” 面板， 司 mr 
此 时 便 可 在 该 面板 中 对 框架 集 进 行 相应 的 设 i 
置 。 下 面 将 分 别 介绍 各 属性 设置 的 参数 含义 。 — 


人 办 “框架 名 称 ” 文 本 框 : 该 文本 框 的 主要 作用 不 仅 显示 框架 名 称 ， 还 可 在 该 文本 框 中 重 命 
名 框架 名 称 。 

个 “ 源 文件 ”文本 框 : 该 文本 框 主要 是 用 于 指定 所 选 框架 所 对 应 的 网 页 文件 的 路 径 及 名 称 ， 
也 可 通过 该 文本 框 后 的 七 按钮 和 国 按 钮 ， 重 新 指定 源 文件 的 路 径 。 其 中 ， 单 击 国 按 钮 后 ， 
只 需要 按 住 饼 标 左 键 拖 动 至 目标 文件 再 释放 和 鼠标 左 键 即 可 , 而 单 击 回 按 钮 , 则 需要 打开 “ 选 
择 HTML 文件 ”对 话 框 ， 在 该 对 话 框 中 设置 路 径 、 名 称 后 ， 单 击 国 酌 吏 按钮 即 可 。 

让“ 滚动 ”下 拉 列 表 框 : 主要 是 用 于 框架 出 现 滚动 条 的 方式 ， 在 该 下 拉 列 表 框 中 包括 4 个 
选项 ， 分 别 是 “是 ”、“ 和 否 ”、“ 自 动 ” 和 “默认 ”选项 。 其 中 “是 ”表示 始终 显示 滚 
动 条 ; “和 否 ” 则 不 显示 滚动 条 ; “自动 ”表示 当 框 架 中 的 内 容 超出 了 框架 大 小 后 出 现 滚 
动 条 ， 和 否则 将 不 出 现 滚动 条 ; “默认 ” 则 根据 浏览 器 采用 的 方式 进行 自动 调整 。 

如 “边界 宽度 ”和 “边界 高 度 ”文本 框 : 主要 用 于 设置 框架 中 的 内 容 与 框架 边框 的 左 、 右 、 
上 和 下 间距 。 

从 团 不 能 二 并 天 下 于 复 选 框 : 选中 该 复 选 框 ， 则 表示 不 能 在 浏览 器 中 通过 拖 动 框架 边框 的 方法 
改变 其 大 小 ; 若 取消 选中 复 选 框 ， 拖 动 框架 边框 则 能 改变 其 大 小 。 
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人 如 “边框 ”下 拉 列 表 框 : 主要 用 于 设置 框架 是 否 有 边框 。 默 认 情 况 下 ， 在 浏览 时 ， 框 架 是 不 
会 显示 边框 的 。 
如 “边框 颜色 ”文本 框 : 主要 是 在 设置 了 框架 边框 后 ， 为 边框 输入 十 六 进 制 的 颜色 。 若 单 击 
文本 框 前 的 国 按 钮 ， 则 可 在 弹出 的 颜色 面板 中 选择 需要 设置 的 颜色 ， 同 时 也 会 以 十 六 进 制 
的 形式 显示 在 后 面 的 文本 框 中 。 
2. 框架 集 的 属性 设置 
设置 了 框架 的 属性 后 ， 也 可 选择 整个 框架 集 ， 对 其 属性 进行 设置 ， 而 且 框 架 集 的 属性 与 框 
架 的 属性 大 部 分 是 相同 的 ， 唯 一 不 同 的 是 在 框架 集 的 “属性 ”面板 中 的 “ 值 ”文本 框 中 设置 行 
或 列 框架 的 大 小 ， 并 且 还 可 以 在 “ 选 定 范围 ”以 图 像 的 形式 显示 设置 的 是 行 还 是 列 框架 。 
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3.3.6 “IFrame 框架 的 使 用 
IFrame 框 架 被 称 为 浮动 框架 ， 它 比 一 般 的 框架 更 加 容易 控制 整个 网 站 的 内 容 ， 但 其 操作 却 
比 一 般 框架 的 操作 更 加 难 ， 因 为 在 Dreamweaver CS6 中 并 没有 为 浮动 框架 设置 一 个 可 视 化 的 界 
面 进行 操作 ， 因 此 要 使 用 浮动 框架 则 需要 在 “代码 ”视图 中 进行 操作 。 62 € 
1. 创建 IFrame 框架 
在 网 页 编辑 区 中 创建 IFrame 框架 其 实 很 简单 ， 可 以 直接 选择 【插入 】/【HTML】/【 框 
架 】 命令 ， 在 弹出 的 子 菜单 中 选择 “IFRAME” 命 令 ， 自 动 切换 到 “ 拆 分 ”视图 中 ， 即 可 查看 
到 <iframe></iframe> 标签 即 IFrame 框架 标签 。 
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2. 链接 IFrame 框架 页 面 
在 网 页 编辑 区 中 ,对 IFrame 框架 的 页 面 链 接 与 其 他 的 普通 链接 基本 相同 , 但 需 注意 的 是 ， 
在 链接 IFrame 框架 页 面 时 ， 在 “目标 ”文本 框 中 输入 的 名 称 必须 是 IFrame 框架 的 名 称 。 2 
下 面 将 在 “recipeshtml” 网 页 中 添加 IFrame 框架 ， 其 具体 操作 如 下 : 人 A 


证 语 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


wi 建立 浮动 框架 


打开 “recipes.html” 网 页 ， 将 插入 点 定位 到 
网 页 的 底部 ， 单 击 E 琴 按钮， 进入 到 “ 拆 分 ” 
视图 。 

2. 在 光标 定位 的 地 方 输入 标签 <iframe 
name="tsc" width="664px" height= 
4 建立 浮动 框架 。 


EE3 
加 


元 BA] 砚 m| | 有 四 口 EEC 
_ 架 的 高 度 。 EE | 高 0 站 
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WE 打开 “选择 文件 ”对 话 框 


在 窗口 左上 角 , 单 击 [E 卫 到 按钮 ， 切 换 到 “设计 ” 
视图 中 。 

2.， 在 网 页 编辑 区 中 ， 选 择 “ 特 色 菜 ”图 片 。 

3.， 在 "属性 " 面板 中 的 “链接 " 文本 框 后 单 击 “ 浏 
览 文件 夹 " 按钮 回 , 打开 “选择 文件 ”对 话 框 。 


8 i 
加 能 记 住 需要 链接 文 
二 的 名 称 ， 则 可 直接 在 “链接 ”文本 框 中 输入 

| 


Dw 设 品 - x 
文生 (有声 兴 (E 
ss rr 1 在 打开 对 话 框 的 “查找 范围 下拉 列表 框 中 
TN rn 选择 文件 所 在 的 路 径 。 
2.， 在 下 方 的 列表 框 中 找到 并 选择 需要 链接 的 
dr 文件 。 
ee | (GD 所 )= 引 | 。 3， 单 击 EE 双 本 按钮 ， 完 成 文件 选择 。 
02 E27 peripss 
| 
| ee | _ 读书 笔记 
图 像 和 WO EE PCCP EE 
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网 页 布局 


链接 浮动 框架 四 me 


返回 到 网 页 编辑 区 中 , 在 "属性 "面板 的 “目标 ” 
文本 框 中 输入 浮动 框架 的 name 名 称 "tsc”。 ET | 

2， 按 Ctrl+S 组 合 键 ， 进 行 保存 ， 单 击 励 按钮 ， me Ei) eee 
六 涛 浏 训 项 列 到 (EE) 


在 弹出 的 下 拉 列 表 中 选择 “预览 在 IExplore” br Bes 
选项 ， 打 开 IE 浏览 器 。 > 1 
。 | 


| 和 在 “目标 "文本 框 中 输入 的 名 称 一 ] 

| 定 要 与 <iftame></iframe> 标签 中 “name” 属 性 ) 

| 的 名 称 一 样 ， 否 则 在 单 击 超级 链接 时 ， 则 不 会 = ee 
de 7 


本 本 预览 效果 


在 浏览 器 中 ， 单 击 “ 特 色 菜单 ”超级 链接 ， 即 可 
在 浮动 框架 中 浏览 内 容 效 果 。 


一 筹 管 一 一 代码 解释 


在 “代码 ”视图 中 可 看 到 一 串 代 码 ， 其 中 <IDOCTYPE html PUBLIC "-WW3CWDTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> 主要 作用 是 告诉 
浏览 器 该 网 页 是 用 何 种 元 素 声 明 ， 这 里 是 用 HIML， 浏 览 器 将 会 寻找 匹配 的 公共 标识 的 DID 
进行 解析 ， 如 果 没 有 找到 ， 则 会 按照 后 面 给 定 的 路 径 进行 寻找 。 而 且 网 页 代码 分 为 头 部 标签 
<head></head> 和 内 容 标 签 <body></body>。 头 部 标签 中 还 包括 标题 标签 <title></title>， 但 所 
有 标签 都 放 在 <html></html> 标签 内 。 


看 目 EEJEODONE 制作 网 站 后 台 管 理 页 面 


进一步 掌握 框架 页 面 的 创建 。 进一步 掌握 IFrame 框架 的 使 用 方法 。 
进一步 熟悉 框架 页 面 的 属性 设置 。 
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新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


本 次 实例 将 新 建 一 个 空白 HTML 网 页 ,在 该 网 页 中 插入 框架 , 根据 网 页 制作 的 实际 情况 ， 
对 框架 进行 拆 分 ， 并 制作 各 个 框架 网 页 ， 最 后 在 内 容 框架 中 链接 一 个 浮动 框架 。 当 单 击 超级 链 
接 时 ， 显 示 出 浮动 框架 的 内 容 ， 其 最 终 效 果 如 下 图 所 示 。 


网 站 信息 
导航 管理 


使 用 自由 网管 理 系统。 
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网 页 布局 
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1. 新建 HTML 空白 网 页 ， 并 将 其 保存 EE 2 
为 “index.html”。 1 9 
2， 将 插入 点 定位 到 空白 位 置 ,选择 [ 插 到 
入 】/【HTML ] /【 框 架 ] 命令 ， 在 Sr 
天 (( 
弹出 的 子 菜单 中 选择 “对 齐 上 缘 ” RE [= "= | 
命令 。 = | 这 
3.， 在 打开 的 对 话 框 中 保持 默认 设置 到 
后 ， 单 击 医 醋 梧 按钮， 完成 框架 的 “‖ :SEE 当 
插入 。 nd 

拔 近 的 代 克 片 疡 (R) 文本 对 象 0 » 


i 


按 Shift+F2 组 合 键 ， 打 开 “ 框 架 ” 面板， 选择 
mainFrame 框架 。 将 鼠标 光标 移 至 框架 左边 框 线 
上 ， 按 住 鼠 标 左 键 拖 动 边框 线 至 合适 的 大 小 ， 释 
放 鼠 标 完成 拆 分 框架 操作 。 


AGE 68 最 。 保存 框架 及 框架 集 


Dw 设 时 器 FE 
2 pe 将 插入 点 分 别 定位 到 各 个 框架 内 部 ， 按 Ct+S 组 
NEED S| SO 合 键 ,打开 “另存 为 "对 话 框 ,将 其 分 别 保存 为 “top. 

wr html”、 “left.html” 和 “right.html”。 在 文件 夹 
后 中 可 查看 到 保存 的 网 页 。 
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1.， 将 插入 点 定位 到 top 页 面 ， 单 击 [项 臣 ] 按 钮 ， 
切换 到 “ 拆 分 ”视图 中 。 

2.， 在 代码 窗口 中 ， 在 <body></body> 标签 内 部 
人 DIV 标签 。 


i 制作 CSS 样式 表 


分 别 为 创建 的 DIV 标签 创建 CSS 样式 “top_ 
main” 和 “top_left” 

2.， 分 别 设置 “top_main” 和 “top_left” 的 CSS 
属性 并 在 代码 窗口 中 进行 查看 。 


Dw EE 
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eu-waoro/13ss1xmrcm> 


mera hetp-equir"Content Type”" 
ontent="text /htnl: charser=urE-8 /> 
: 


HE LK Vicod R70)  ， 


nent-"tent /henl; charser-utt-0" 7> | 
rirle> 天 村 是 文 村 </ticle> 
aryle cyParyzexr/caan> 


margin:Opx ence; 
eight: 44px; 
aach 1002px 
backaround-inage; 
ori (inages/02_01.3pg); 
) 
rop_ iert 
Padding-top: 6px; 


修改 CSS 样式 表 


将 插入 点 定位 到 top_left 标签 中 ， 输 入 文本 
"Free Net Management System”。 

2.， 选择 “top_left”CSS 样式 ， 在 CSS 样式 面 
板 右 下 角 单 击 国 按 钮 。 

3. 在 打开 对 话 框 的 “分 类 " 列表 框 中 选择 "类 型 " 
选项 。 

4. 在 右 侧 窗 格 中 分 别 将 Font_family、Font_size 
和 Color 设置 为 “Myriad Pro”、“26” 和 

"#3f6aa3”。 


Rent-stsle fr) Fart-varient rm 
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Tu 链接 图 上 


将 插入 点 定位 到 “top_ a 
right” 标签 中 。 在 “ 拆 分 ” 。 [won ; 一 一 一 一 一 一 
视图 的 代码 窗口 中 输入 ” 司 辆 |- 
<img src="images/03_02. 
jpg /> 

2.， 在 “ 拆 分 ”视图 中 的 设计 窗 
口中 查看 其 效果 。 完 成 top 
框架 的 制作 。 


-| 回 同 | 4 :60 1 /1 秒 Unicol: mro | 


二 Wf er En 


将 插入 点 定位 到 left 框架 中 ， 使 用 制作 
top 框架 的 方法 ， 在 left 框架 中 插入 DIV ap 


eagnc: SE7px: 


标签 ， 为 DIV 标签 插入 CSS 样式 。 ackgroond: gaselrt 


lecc_poxl 


marain;Dpx auto; 
ahz134pa 
etghEi23Pa 
background-ixage; 

cl (imagea/02_04.3p9] 7 


Lest pex2 
margin op aocor 
widen: 13spx; 


制作 right 框架 


将 插入 点 定位 到 right 框 架 
中 ， 插 入 一 个 DIV 标 签 ， 
为 标签 添加 CSS 样式 “right_ 
main”。 

2.， 在 "CSS 样式 " 面板 中 将 “ 方 框 ” 
选项 下 的 “width” 和 “height" 
属性 分 别 设置 为 “855px” 和 

“590px”。 

3. 在 "背景 ” 选项 中 分 别 将 
“background-image” 和 
“background-repeat” 设 置 为 
“url(images/02_08.jpg)” 和 
"repeat-y”。 
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种 卫 汪汪 新手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


AGE 昌 添加 浮动 椎 架 

在 “ 拆 分 ”视图 的 “代码 ”窗口 中 ， 在 <div 
class="right_main"></div> 中 输入 代码 <iframe 
name="tp”width="855px”height="890"></ 
iframe>。 


lilililll 


hn 

1.， 在 left 框架 中 选择 “分 类 下 载 ” 文 本 。 

2.， 在 “属性 ”面板 中 的 “链接 ”文本 框 中 输入 
“images/12_05.jpg”。 

3， 在 "目标 ” 文本 框 中 输入 “tp”。 完 成 整个 例 
子 的 制作 。 


在 编辑 网 页 中 单 击 励 按 钮 ， 在 弹出 的 下 拉 列 
表 中 选择 “预览 在 IExplore” 选 项 ， 便 可 在 


浏览 器 中 进行 预览 。 
2.， 单 击 “ 分 类 下 载 ” 超 级 链接 ， 则 可 显示 查看 


浮动 框架 的 内 容 。 


多 迎 使 用 自由 网 管理 系 纺 | 


er 


0 
3.4 练习 1 小 时 


本 章 主要 对 网 页 的 表格 、DIV+CSS 以 及 框架 布局 进行 了 详细 的 介绍 , 不 仅 让 读者 对 表格 、 
DIV+CSS 以 及 框架 有 了 初步 的 认识 ， 相 信 读 者 根据 本 章 所 讲解 的 知识 可 以 制作 出 一 些 更 精美 
的 网 页 。 下 面 就 以 练习 制作 摄影 首页 和 制作 个 性 网 页 为 例 ， 让 读者 更 加 熟练 地 掌握 各 种 网 页 布 
局 的 操作 方法 。 


(个 ”制作 摄影 首页 


本 例 将 根据 提供 的 图 片 素材 ， 制 作 网 页 “photography.html” 进 行 练习 ， 首 先 在 新 建 的 
HTML 网 页 中 插入 “上 方 及 下 方 " 的 框架 ,分 别 将 插入 点 定位 到 各 框架 中 进行 保存 , 并 使 用 “全 
部 保存 ”命令 将 其 保存 为 “photography”， 再 分 别 对 各 框架 进行 制作 ， 其 中 制作 上 方 的 框 
架 时 使 用 DIV+CSS 进行 布局 ， 制 作 中 间 部 分 可 以 使 用 DIV+CSS 和 表格 进行 布局 ， 在 表格 
中 插入 各 种 图 片 ， 其 最 终 效 果 如 下 图 所 示 。 


Photography Sty 


2012 症 2 月 百 而 文章 订 闻 加 本 圈 系 拟 /] 


存在 一 此 属于 个 人 作品 约 文章 ， 
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摄影 one 摄影 two 摄影 fhree 摄影 four 
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让 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 
(2 制作 个 性 网 页 
HTML， 将 其 保存 为 “style.html”， 


本 例 将 对 制作 网 页 “style.html”， 新 建 一 个 空 
首先 在 网 页 中 将 其 背景 色 设置 为 黑色 ， 再 使 用 DIV+CSS 进行 布局 设计 ， 将 整个 页 面 布局 分 
为 上 、 中 、 下 ， 并 在 各 部 分 中 嵌 套 其 他 DIV 标签 ， 最 后 使 用 CSS 样式 对 其 设置 ， 其 最 终 效 


果 如 下 图 所 示 。 


我 二 福 吗 ? 这 是 我 纸 要 的 让 祷 吗 7 我 依然 在 问 自己 。 诗 话 


是 什么 ? 竹 苦 兰 的 思考 ， 之 在 一 朗 卑 找 。 后 来， 我 发 更， 我 将 


自己 把 地 话 妨 接 在 棕 虫 于 了 ， 基 起 ， 有 许 许多 多 是 不 现实 的 末 
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表单 与 动态 网 页 的 制作 


章 


学 习 2 4 时 ji。 人 hii 


seeonosonosessesssessseassessssssssassss DB 
除了 制作 一 些 静 态 的 网 页 外 ， 用 户 也 可 以 根 人 a 


据 需 要 制作 一 些 交 互 性 的 表单 网 页 , 如 问卷 调查 、 

注册 与 登录 、 留 言 板 等 ， 也 可 在 Dreamweaver : 

CS6 中 连接 数据 库 ， 自 动 从 数据 库 中 获取 数据 ，。 @ 二 

或 将 网 页 中 的 数据 存储 到 数据 库 ， 实 现 网 页 的 动 : 

态 操 作 。 本 章 将 对 表单 与 行为 、 动 态 网 页 的 制作 : 

方法 进行 讲解。 : 上 机 3 小 时 


有 沁 训 计 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


4.1 表单 和 行为 的 使 用 


在 交互 网 站 中 表单 是 创建 整个 站 点 的 基础 ， 也 是 服务 器 获取 用 户 信息 的 一 种 手段 ， 而 行为 


则 是 Dreamweaver CS6 中 预 置 的 一 些 动态 功能 ， 如 提示 窗口 、 小 广告 等 。 通 过 表单 和 行为 都 可 
以 进行 交互 式 网 页 的 制作 ， 从 而 提高 网 页 浏览 量 和 点 击 率 ， 达 到 产品 推广 的 效果 。 下 面 将 分 别 
对 表单 和 行为 的 使 用 方法 进行 介绍 。 


ESEEN------ 

驴 了 解 什么 是 表单 。 人 了 解 什么 是 行为 。 
久 掌握 表单 的 使 用 方法 。 掌握 行为 在 网 页 中 的 应 用 。 有 | 
4.1.1 认识 表单 字 JD 严 邓 胡 


个 AP BP emasonal cuiomen 


表单 是 客户 端 与 程序 设计 的 纽带 。 在 交 
互 式 网 站 中 通过 表单 ， 服 务 器 可 以 收集 用 户 
的 姓名 、 年 龄 等 信息 ， 虽 然 表 单 本 身 不 能 把 
信息 传 回 服务 器 ,但 它 可 通过 其 他 动态 语言 ， 
如 ASP、PHP 和 JSP 等 将 表单 信息 处 理 后 传 
回 到 服务 器 ， 如 右 图 所 示 为 京东 商城 的 一 个 
注册 页 面 。 


经 验 一 敌 能 一 一 表单 的 深度 认识 


在 同一 个 网 页 中 ， 可 以 同时 存在 多 个 表单 ， 并 且 还 可 以 在 表单 中 添加 多 个 对 象 ， 而 表单 大 小 则 
会 因为 添加 的 对 象 自动 进行 调整 。 但 需 注意 的 是 ， 如 果 在 表单 中 添加 表单 或 同一 网 页 中 有 多 个 
表单 时 ， 其 表单 的 名 称 不 能 相同 ， 否 则 会 导致 在 引用 表单 时 发 生 冲 突 。 


4.1.2 表单 的 使 用 


表单 是 用 户 向 服务 器 提交 信息 的 一 种 手段 ， 如 用 户 要 在 网 站 中 进行 下 载 或 购买 商品 等 操作 
时 ， 都 会 要 求 先 登录 ， 如 果 没 有 登录 账号 ， 需 要 用 户 进行 注册 。 不 管 是 登录 界面 ， 还 是 注册 页 
面 ， 大 部 分 都 是 使 用 表单 进行 制作 的 ， 并 且 表 单 也 是 由 多 个 表单 对 象 组 成 ， 如 文本 字段 、 单 选 
按钮 、 图 像 域 和 按钮 等 。 下 面 将 对 插入 表单 、 表 单 中 各 种 对 象 的 添加 及 表单 中 对 象 属性 设置 方 
法 进行 介绍 。 

1. 插入 表单 

表单 是 表单 对 象 的 “容器 ”, 同时 它 还 包含 动态 处 理 页 面 信息 及 如 何 传送 表单 数据 等 特性 。 
制作 表单 页 面 之 前 首先 要 创建 表单 ， 然 后 再 将 表单 对 象 添加 到 表单 内 部 ， 否 则 所 制作 的 表单 页 
面 将 不 能 正常 运行 。 在 Dreamweaver CS6 中 ， 创 建 表单 的 方法 十 分 简单 ， 可 以 通过 “插入 ” 面 
板 或 菜单 命令 进行 创建 ， 下 面 将 分 别 进行 介绍 。 


表单 与 动态 网 页 的 制作 


从 通过 “插入 ”面板 插入 : 将 插入 点 定位 到 ”人 避 通过 “菜单 ”命令 插入 : 将 插入 点 定位 到 需 
需要 插入 表单 的 位 置 ， 在 “插入 ”面板 中 单 ”要 插入 表单 的 位 置 ， 选 择 【插入 】〗/【 表 单 】 了 / 
击 下 方 的 下 拉 按 钮 中 ， 在 弹出 的 下 拉 列 表 中 【表单 〗 命 令 ， 即 可 在 网 页 编辑 区 中 创建 以 
选择 “表单 ”选项 ， 即 可 切换 到 表单 列表 中 ， 红色 虚线 方 框 表示 的 空白 表单 。 

单 击 “表单 ”按钮 回 ， 即 可 在 网 页 编辑 区 中 

创建 以 红色 虚线 方 框 表 示 的 空白 表单 。 


Dw “ 
站 WE PB NO Rt 


2. 表单 属性 的 设置 


在 网 页 编辑 区 中 插入 表单 后 ， 还 可 以 对 整个 表单 的 属性 进行 设置 ， 如 表单 的 名 称 、 动 作 、 
方法 、 目 标 以 及 编辑 类 型 等 ， 让 表单 做 到 真正 的 交互 ， 从 而 让 客户 端的 信息 提交 到 服务 器 。 设 
置 表单 的 属性 可 通过 “属性 ”面板 进行 设置 ( 其 实 插入 网 页 编辑 区 的 所 有 对 象 ， 都 会 出 现 相应 
的 “属性 ” 面板， 用户 可 通过 该 面板 设置 相应 对 象 的 属性 ) 。 


oak OO ef 次 C) 无 
纺 肥 类 型 - 
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下 面 将 分 别 介绍 各 属性 的 作 

人 “表单 1D” 文本 框 : 其 主要 作用 是 为 表单 命名 ， 以 便 对 表单 进行 引用 ， 如 在 一 些 脚本 语言 
中 ， 表 单 名 若 为 userid， 在 引用 时 ， 则 会 使 用 代码 userid.username="textname" 来 表示 表单 
对 象 的 名 称 。 

侣 “动作 ”文本 框 : 其 主要 用 于 指定 处 理 表单 的 动态 页 面 或 脚本 的 路 径 ， 其 文本 框 的 内 容 可 
以 是 动态 网 页 (tsfo.asp ) 、URL 地 址 、HTTP 地 址 以 及 Mailto 地 址 等 。 

人 “方法 ”下 拉 列 表 框 : 其 主要 作用 是 设置 表单 信息 提交 到 服务 器 的 方式 ， 该 方式 主要 包括 
Post 和 Get， 默 认 情况 是 Post。 其 中 Post 是 指 将 所 有 信息 封装 在 HTTP 请 求 中 ， 是 一 种 可 
以 传递 大 量 数据 的 信息 并 且 比 较 安 全 的 方式 (在 传递 信息 时 不 会 在 浏览 器 的 地 址 栏 中 显示 
信息 或 路 径 ) ; 而 Get 则 是 直接 将 数据 追加 到 请 求 到 该 页 的 URL 地 栏 中 ， 其 数据 信息 量 
有 限 ， 并 且 不 安全 (在 传递 信息 时 ， 可 以 直接 在 浏览 器 的 地 址 栏 中 查看 到 传递 信息 ) 。 

如 “目标 ”下 拉 列 表 框 : 其 主要 作用 是 设置 转 到 目标 页 面 的 方法 ， 如 _blank 表示 在 当前 窗 
口中 打开 目标 页 面 ; _new 表示 以 新 窗口 的 方式 打开 目标 页 面 ; _parent 表示 在 父 窗口 中 打 
开 目 标 页 面 ; _self 表示 以 自身 的 窗口 打开 目标 页 面 ( 在 没有 使 用 框架 的 情况 下 与 _blank 


Hour: 
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的 效果 相同 ) ; _top 表示 以 顶端 窗口 显示 目标 页 面 ( 在 框架 网 页 中 ) 。 

从 “编码 类 型 ”下 拉 列 表 框 : 其 主要 是 指 提交 数据 时 所 使 用 到 的 编辑 类 型 ， 其 默认 设置 为 

“application/x-www-form-urlencoded”， 一 般 情 况 下 是 与 Post 协同 使 用 。 如 果 要 创建 文件 

上 传 表单 ， 则 应 选择 “mnultipartform-data” 类 型 。 

人 加 “类 ”下 拉 列 表 框 : 其 主要 作用 是 选择 表单 所 在 的 CSS 样式 ， 可 以 通过 自 定义 样式 对 表 
单 进行 美化 。 
3. 添加 并 设置 表单 对 象 的 属性 
在 表单 中 ， 单 独 的 表单 是 不 能 实现 具体 的 功能 的 ， 只 有 在 表单 中 添加 对 象 后 才能 实现 相应 


的 功能 ,因此 在 表单 中 添加 对 象 是 必 不 可 少 的 操作 , 并 且 表 单 中 添加 了 不 同类 型 的 表单 对 象 后 ， 
则 可 以 允许 用 户 进 行 输入 、 选 择 等 操作 ， 下 面 分 别 进行 介绍 。 
(1) 添加 文本 字段 对 象 


文本 字段 可 以 输入 单行 、 密 码 和 多 行 3 种 类 型 的 文本 内 容 。 添 加 文本 字段 的 方法 很 简单 ， 
将 鼠标 光标 定位 到 需要 添加 文本 字段 的 位 置 ， 再 在 “插入 ”面板 中 的 “表单 ”选项 下 单 击 “ 文 


本 字段 ” 


按 包 E， 打 开 “ 输 入 标签 辅助 功能 属性 ”对 话 框 进行 添加 设置 即 可。 


下 面 将 在 创建 的 HTML 空白 网 页 中 添加 表单 ， 在 表单 中 添加 文本 字段 对 象 ， 并 对 该 对 象 
中 进行 相应 属性 设置 ， 其 具体 操作 如 下 : 


i 
本 本 本 准备 添加 文本 字段 对 象 rE wmo_ ee aaa aaaam 


1. 创建 
html” 


2.， 在 HTML 网 页 中 插入 表单 ， 将 插入 点 定位 到 
表单 中 


HTML 空白 网 页 ， 并 保存 为 “form. 
页 面 。 


3 在 “插入 ”面板 中 选择 “表单 ”选项 卡 ， 在 
该 选项 卡 下 的 列表 框 中 单 击 “ 文 本 字段 ” 按 


钮 EJ 


本 村 入 对 旬 = 
“输入 标签 辅助 功能 属性 "对 话 框 ,在 “ID” FG 玉 一 


, 按 Ctrl+F2 组合 键 , 打开 “插入 " 面板 。 


lo 


1 打开 
文本 框 中 输入 “textname”， 在 “标签 ” 文 A 
本 框 中 输入 在 界面 中 显示 的 文本 “用 户 名 ”。 ss 

2， 其 他 保持 默认 设置 ， 单 击 EE 梧 按钮， 完成 
文本 字段 的 插入 操作 。 人 


在 文本 框 前 过 在 “位 中选 


认 情 况 下 插入 的 文本 字 科 对 象 的 


吉 时 在 插入 对 旬 时 不 本 输入 雍 套 皇 ， 寺 豆 堵 
二 区 " 首 和 全 玫 。 
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i 设置 文本 字段 属性 


选择 插入 的 文本 字段 对 象 二 aa sa De 
2， 在 “属性 ”面板 中 将 “字符 宽度 ”和 “最 多 
字符 数 ” 都 设置 为 “16 
3， 在 “初始 值 ” 文本 框 中 输入 “请 输入 用 户 名 ”， 
其 他 保持 默认 设置 。 


本 本 本 添加 其 他 文本 字段 


1.， 使 用 添加 文本 字段 对 象 的 方法 ， 再 添加 两 个 
文本 字段 。 

2.， 在 “属性 ”面板 中 分 别 选中 国 密 雄 硬 有 单 选 按钮 
和 国 请 行 哺 单 选 按钮 。 

3.， 在 "属性 ”面板 中 的 “初始 值 ”列表 框 中 输 
入 文本 “请 输入 留言 ” 


司 二 二 
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1.， 按 Ctrl+S 组 合 键 进行 保存 ， 单 击 “ 在 浏览 器 
中 进行 预览 /调试 ”按钮 融 ， 在 弹出 的 下 拉 列 
表 中 选择 “预览 在 IExplore” 选 项 。 

2.， 在 打开 的 浏览 器 文本 框 中 输入 文本 和 密码 后 


查看 其 效果 。 
Dp- 
ens 4 VO oon -| 邮 | 3 71 和 GCTES 加 
属性 
回 文本 ml FT 
Fsey 有 类 全 六 向 二 
已 天 四 ) EEC 页 
RR 
言 : Y 
(2 ) 添加 复 选 杠 


在 表单 中 ， 复 选 框 的 作用 是 允许 同时 选中 一 个 或 多 个 ， 它 主要 用 于 并 列 关系 的 选项 。 在 
表单 中 添加 复 选 框 的 方法 与 添加 文本 字段 的 方法 基本 相同 ， 都 可 以 通过 菜单 或 “插入 ”面板 进 
行 添加 ， 下 面 将 介绍 其 添加 的 方法 。 
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从 通过 菜单 命令 添加 : 将 插入 点 定位 到 需 添加 复 选 框 的 位 置 ， 选 择 【 插 入 】〗/【 表 单 】/【 复 
选 框 ] 命 令 , 即 可 打开 “插入 标签 辅助 功能 属性 ”对 话 框 , 其 设置 与 添加 文本 字段 对 象 一 样 ， 
在 对 话 框 中 设置 完成 后 ， 单 击 匡 厂 E 辐 按钮 即 可 。 


Dw Ea a 
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need 


SS 和 谭 ， 


于 | 


轩 户 窗 码 | 


| 逢 式 个 用 标牌 标记 环 培 

确认 密码 ， 区 

电邮 箱 , "| 一 一 一 
Rif 位 时 日 在 天 音阶 :i i 

i 后 在 于 表 后 

: 访问 狂 Ta 记 表 了 


果 在 本 人 允 旭 时 不 下 输入 此 任 且 ， 适 更 政要 [Ra TY ho -| 可 同 夯 ER277TR7T 和 二 NOP 
EY? 朝 E33 


ynmL] | 前 开罗 回 和 Wm 衫 引 枯 赤 已 和 适 ) 
Pen 和 中 


个 通过 “插入 ”面板 添加 : 按 Ctrl+F2 组 合 键 打开 “插入 ”面板 ， 在 “表单 ”选项 卡 下 ， 单 
击 “ 复 选 框 ” 按 钮 同 ， 打 开 “ 插 入 标签 辅助 功能 属性 ”对 话 框 ， 在 对 话 框 中 进行 设置 后 ， 
单 击 EEBE 可 按钮 ， 即 可 添加 复 选 框 。 

在 表单 中 添加 复 选 框 后 ， 使 用 鼠标 将 其 选中 ， 便 可 在 “属性 ”面板 中 进行 属性 设置 ， 复 
选 框 的 属性 很 简单 ， 主 要 就 是 设置 复 选 框 的 初始 状态 ， 包 括 画 来 透 遇 辐 单 选 按钮 和 回避 光 选 6j 单 
选 按钮 。 如 果 选 中 画 索 透 币 加 单 选 按 钮 ， 则 表示 复 选 框 成 为 未 选中 状态 ， 如 果 选 中 国 忆 二 选 6 划 单 
选 按钮 ， 则 表示 复 选 框 成 为 选中 状态 。 


Ea 
回 加 本 名称 WE 初雪 要 态 中 已 和 人 天 中 无 
Pr 加 未 寺中 


经 验 一 敌 信 “ 选 定 值 ”的 作用 


在 复 选 框 的 “属性 ”面板 中 ，“ 选 定 值 ”文本 框 主要 用 于 对 复 选 框 的 标签 文本 进行 说 明 ， 因 为 
提交 到 服务 器 的 实际 值 是 在 “ 选 定 值 ” 文 本 框 中 进行 设置 的 。 


(3 ) 添加 复 选 框 组 

在 表单 中 还 可 以 添加 复 选 框 组 ， 其 方法 与 添加 复 选 框 的 方法 相同 ， 唯 一 不 同 的 是 ， 需 要 

在 打开 的 “ 复 选 框 组 ”对 话 框 中 进行 设置 。 如 在 “名称” 文本 框 中 输入 复 选 框 组 的 名 称 , 在 “ 复 
选 框 ”列表 框 中 修改 标签 名 和 值 ( 默认 情况 下 只 有 两 个 复 选 框 ， 如 果 需 要 更 多 的 复 选 框 ， 可 在 
“ 复 选 框 ”后 单 击 册 按钮 进行 添加 ,对 不 需要 的 复 选 框 , 单 击 电 按钮 将 其 删除 ) , 设置 完成 后 ， 
单 击 匡 右 汪 按钮 即 可 批量 添加 复 选 框 。 


考 局 ,全 有: 加 按 生 符 ( <b> 林 天) 爱好 ， 
加 二 帮 


表单 与 动态 网 页 的 制作 
(4 ) 添加 单 选 按钮 


在 表单 中 ， 单 选 按钮 表示 只 能 选择 其 中 的 某 一 项 ， 可 用 于 性 别 、 学 历 和 城市 等 具有 唯一 性 
选项 的 选择 。 其 添加 方法 与 其 他 对 象 的 添加 相同 ， 并 且 设置 的 单 选 按钮 的 属性 和 作用 基本 都 相 
同 ， 唯 一 不 同 的 是 ，“ 属 性 ”面板 的 “ 单 选 按钮 ”文本 框 中 的 名 称 是 相同 的 ， 而 “ 选 定 值 ” 文 
本 框 中 的 值 则 不 同 ， 这 是 由 于 单 选 按钮 存在 排斥 性 。 


(5 ) 添加 单 选 按钮 组 

在 表单 中 单 选 按钮 组 中 通常 包括 多 个 单 选 按钮 ， 如 果 表 单 中 需要 的 单 选 按钮 较 多 时 ， 逐 个 
添加 不 仅 麻 烦 ， 还 比较 费时 。Dreamweaver CS6 中 提供 的 单 选 按钮 组 功能 ， 可 以 一 次 性 完成 所 
有 单 选 按钮 的 添加 。 

下 面 将 在 “form_radios.html” 网 页 中 添加 单 选 按钮 组 ， 并 对 其 属性 进行 设置 ， 其 具体 操作 
如 下 | 


本 本 本 添加 单 选 按钮 组 

1， 打 开 “form_radios.html” 网 页 ， 将 鼠标 光标 
定位 到 要 添加 单 选 按钮 组 的 位 置 。 

2.， 在 “插入 ”面板 的 “表单 ”选项 卡 下 的 列表 
框 中 单 击 “ 单 选 按钮 组 ”按钮 固 。 


丁丁 本 设置 单 选 按钮 组 


1. 在 打开 对 话 框 的 “名 称 ” 文 本 框 中 输入 单 选 


按钮 名 称 “rg_sex”。 0 医 
2， 在 “标签 ” 列 输入 标签 文本 。 在 “ 值 ” 列 的 加 
文本 框 中 输入 对 应 的 选 定 值 。 
cE 
3 单 击 EEBE 汪 按钮 完成 单 选 按钮 组 的 添加 。 a 


Da 


Hour: 


有 i 训 计 | 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


MSNER03，。 设置 属性 

1. 在 表单 中 选中 男 标签 前 的 单 选 按钮 。 

2.， 在 “属性 ”面板 中 的 “初始 状态 ”后 选中 国 己 光 透 器 
单 选 按钮 ， 完 成 属性 设置 。 


(6 ) 添加 列表 /菜单 

在 表单 中 ， 列 表 /菜单 可 为 浏览 者 提供 预定 的 选项 ， 如 月 份 、 日 期 和 性 别 等 都 可 以 使 用 菜 
单 实现 ， 浏 览 者 只 能 选择 其 中 的 一 项 ， 如 果 人 允许 进行 多 项 选择 ， 则 可 以 通过 列表 来 实现 。 列 表 
和 菜单 可 以 相互 切换 ， 用 户 只 需 在 “属性 ”面板 中 选择 相应 的 类 型 即 可 。 

下 面 将 在 “form_select.html” 网 页 中 的 表单 中 添加 列表 / 菜单 对 象 ， 并 对 其 属性 进行 相应 
的 设置 ， 其 具体 操作 如 下 : 
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1.， 打 开 “form_select.html” 网 页 ， 将 鼠标 光标 
定位 到 要 添加 菜单 的 位 置 。 

2.， 在 "插入 ”面板 的 “表单 ”选项 卡 下 的 列表 
框 中 单 击 “ 选 择 ( 列表 /菜单 ) ”按钮 转 。 


司 


i 设置 菜单 属性 


在 打开 对 话 框 的 “ID"” 文本 框 中 输入 文本 字 
段 ID 名 称 “city”。 

2.， 在 “标签 ”文本 框 中 输入 标签 文本 “城市 ”。 

3.， 在 "位置 ” 栏 ， 选 中 ® [saa 单 选 按钮 ， 将 标 
签 设置 在 列表 框 后 。 

4. 单 击 [ 栈 按钮 ， 完 成 菜单 设置 。 


tt 

1. 在 表单 中 选择 添加 的 所 在 地 城市 。 

2. 在 “属性 ”面板 中 单 击 匡 列 吉 什 <- 末 按钮 ， 打 
开 “ 列 表 值 ”对 话 框 。 


AR 0 二 添加 列表 值 

1. 在 打开 对 话 框 的 列表 框 中 的 “项 目标 签 ” 下 
输入 文本 "成 都 ", 在 “ 值 " 下 输入 “chengdu" 。 

2.， 单 击 国 按 钮 ， 添 加 “项 目标 签 ” 和 “ 值 ”的 
输入 值 。 

3。 完成 添加 列表 值 后 ， 单 击 E 二 司 按 钮 

4.， 返回 到 表单 中 ， 在 “属性 ”面板 的 “初始 化 
时 选 定 "列表 框 中 即 可 查看 到 所 有 的 列表 值 ， 
选择 “绵阳 ”选项 。 

5。 在 列表 框 中 便 会 查看 到 显示 的 “绵阳 ”选项 。 
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菜单 与 列表 可 以 相互 切换 ， 选 择 菜单 后 ， 在 “属性 ”面板 的 “类 型 ” 栏 中 选中 加 及 丝 四 | 单 选 按钮 


可 切换 为 列表 ， 其 “属性 ”面板 如 下 图 所 示 ， 在 其 中 可 以 设置 高 度 值 及 是 否 允许 多 选 等 。 


(7 ) 添加 跳 转 菜单 

跳 转 菜单 在 外 观 上 与 菜单 类 似 ， 不 同 的 
是 ， 跳 转 菜单 可 以 在 选择 菜单 项 后 自动 跳 转 
到 相应 的 页 面 。 其 添加 方法 与 其 他 对 象 基本 
相同 ， 但 跳 转 菜单 在 添加 时 需要 在 “插入 跳 
转 菜单 ”对 话 框 中 设置 跳 转 的 菜单 项 、 跳 转 
的 路 径 等 。 设 置 完 成 后 ， 单 击 EME 按 钮 ， 
即 可 完成 跳 转 菜单 的 添加 。 
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添加 跳 转 菜单 后 ， 则 可 选择 菜单 ， 在 “属性 ”面板 中 对 其 进行 设置 ， 其 设置 方法 与 “ 列 
表 / 菜单” 对 象 的 属性 相同 ， 这 里 就 不 再 更 述 。 


上 经 验 一 筹 仍 一 一 查看 跳 转 荣 单 的 代码 


跳 转 菜单 与 菜单 相同 ， 不 同 的 是 跳 转 菜 
单 添加 了 相应 的 JavaScript 代码， 以 实 
现 了 跳 转 功能 。 切 换 到 代码 视图 ， 可 以 
发 现 网 页 中 定义 了 “MM jumpMenu” 
函数 ， 且 在 “id="jumpMenu"” 代 码 后 添 
加 了 相应 的 调用 代码 。 


(8 ) 添加 按钮 


在 表单 中 ， 按 钮 是 相当 重要 的 一 部 分 ， 
利用 按钮 可 将 表单 中 的 信息 提交 给 处 理 页 面 。 
表单 中 的 按钮 包括 “提交 ”、“ 重 置 " 和 “ 普 
通 ”3 种 类 型 按钮 。 其 中 ， "提交 ”按钮 用 于 
将 表单 的 内 容 提 交 到 服务 器 ; “ 重 置 ”表示 
将 表单 中 的 所 有 项 设置 成 默认 状态 ; “普通 " 
按钮 需要 编写 脚本 才能 执行 相应 操作 ， 否 则 Gs 
单 击 无 反应 ， 其 添加 方法 与 其 他 对 象 _ 样 。 上 | 

按钮 的 属性 与 其 他 表单 对 象 相似 , 不 同 的 是 “动作 " 后 的 各 单 选 按钮 ， 下 面 分 别 进行 介绍 。 

加强 交 表单) 单 选 按 钮 : 选择 表单 中 的 按钮 后 ， 选 中 该 单 选 按钮 ， 则 会 将 所 选 按 钮 变 为 “ 提 
交 ” 按 钮 。 

玉 加 重 设 表单 Rj 单 选 按钮 : 选择 表单 中 的 按钮 后 , 选中 该 单 选 按钮 , 则 会 将 所 选 按钮 变 为 “ 重 
置 ” 按 钮 。 

从 融 无 而 单 选 按钮 :选择 表单 中 的 按钮 后 ， 选 中 该 单 选 按 钮 ， 则 会 将 所 选 按钮 变 为 “普通 ” 
按钮 ， 并 且 还 需要 在 “属性 ”面板 中 的 “按钮 名 称 ”文本 框 中 输入 按钮 的 名 称 ， 在 “ 值 ” 
文本 框 中 输入 显示 在 按钮 上 的 标签 ， 如 输入 “删除 ”后 ， 添 加 相应 脚本 代码 ， 则 为 删除 按 
钮 的 功能 。 


1 经 验 一 等 估 一 一 为 “普通 ”按钮 添加 脚本 


可 以 为 “普通 ”按钮 添加 相应 的 JavaScript 代码 实现 提交 表单 的 功能 ， 如 先 定义 一 个 检查 表单 
的 函数 “check0”， 然 后 在 “普通 ”按钮 代码 中 添加 “ onclick='checkQ;' ” 即 可 。 


〈9 ) 添加 图 像 域 
在 表单 中 ， 图 像 域 具有 提交 按钮 的 功能 ， 且 可 以 使 用 自制 的 图 像 按 钮 作为 图 像 域 的 对 
象 ， 使 其 更 具有 个 性 。 添 加 图 像 域 的 方法 为 : 将 插入 点 定位 到 需要 添加 图 像 域 的 位 置 ， 选 择 
【插入 】/ 【表单 】/【 图 像 域 命令， 打开 “选择 图 像 源 文件 ”对 话 框 ， 在 “查找 范围 ”下 拉 
列表 框 中 查找 图 片 所 在 的 位 置 ， 并 在 下 方 的 列表 框 中 选择 需要 的 图 片 ， 单 击 医 盱 司 按钮 ， 打 
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“插入 标签 辅助 功能 属性 ”对 话 框 ， 在 “ID” 文 本 框 中 输入 文本 。 单 击 攻 旺 本 按钮 ， 插 入 图 
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在 站 定义 中 硬座 扣 甸 坟 1824 于 
元 法 生 汪 文人 相关 注 公 : 变 有 共同 根 旧 孙 * 


添加 并 选择 图 像 域 后 ， 可 直接 在 “属性 ”面板 中 设置 相应 的 属性 ， 其 中 “替换 ”文本 框 的 作用 是 : 
若 在 浏览 器 中 无 法 显示 图 像 时 ， 便 会 显示 “替换 ”文本 框 中 所 输入 的 内 容 。 


(10 ) 添加 文件 域 

在 表单 中 单 击 文件 域 后 ， 会 打开 一 个 选 
择 对 话 框 ， 从 选择 对 话 框 中 选择 需要 的 文件 
后 ,文件 路 径 及 文件 名 即 可 显示 在 文件 域 中 ， 
提交 表单 后 ， 处 理 程序 就 可 以 根据 文件 的 完 
整 路 径 实现 文件 的 上 传 功能 。 其 添加 方法 与 
其 他 对 象 的 添加 方法 相同 。 


日 男 包 @@ 加 EODBODY 


HG 


文件 域 是 由 文本 框 和 按钮 组 成 的 ， 在 浏览 器 中 ， 不 管 是 单 击 文本 框 还 是 文本 框 后 的 按钮 ， 
都 会 打开 “选择 要 加 载 的 文件 ”对 话 框 并 在 其 中 选择 需要 的 文件 ,唯一 的 区 别 是 ,选择 文件 后 ， 
所 选择 文件 的 路 径 会 显示 在 文本 框 中 。 因 此 可 以 在 “属性 ”面板 中 设置 文本 框 的 字符 宽度 和 最 
多 字符 数 。 

(1 ) 添加 隐藏 域 

在 动态 网 页 中 ， 隐 藏 域 使 用 比较 多 。 隐 藏 域 不 显示 在 网 页 上 ， 即 用 户 是 无 法 看 见 的 。 隐 藏 
域 常用 来 保存 一 些 无 须 用 户 知道 的 信息 ， 以 方便 动态 网 页 的 处 理 。 添 加 隐藏 域 的 方法 为 : 将 插 
入 点 定位 到 需要 添加 隐藏 域 的 位 置 ， 在 “插入 ”面板 的 “表单 ”选项 卡 下 单 击 “隐藏 域 ”按钮 
欧 即 可 ， 并 且 在 表单 中 以 而 图 标 进行 显示 。 同 时 ， 用 户 可 以 在 “属性 ”面板 中 的 “ 值 ”文本 框 
中 输入 需要 隐藏 的 值 ， 如 上 传 到 服务 器 的 用 户 名 、 密 码 或 其 他 数据 等 。 


‖ 经 验 一 筹 乱 一 一 隐藏 域 在 代码 中 的 形式 


在 “代码 ”视图 中 表现 为 “<input name="hiddenField" type="hidden" id="hiddenField" value= 
"username" />”, 其 中 , “hiddenField” 表 示 隐 藏 域 的 名 称 ; “hidden?” 表 示 隐 藏 域 ; “hiddenField” 
表示 被 引用 的 ID 名 称 ; “value="username"” 表 示 被 隐藏 值 对 象 所 在 的 ID 名 称 。 


[旭光 i 缉 计 | 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


4.1.3 认识 行为 

在 网 页 制作 中 ， 行 为 是 由 动作 ( 控制 何 时 执行 ) 和 事件 ( 控制 执行 的 内 容 ) 组 成 ， 是 指 在 
某 种 事件 的 触发 下 ， 通 过 一 定 的 过 程 ， 从 而 达到 某 种 目的 。 如 在 网 页 中 单 击 某 个 按钮 或 超级 链 
接 后 ( 单 击 这 个 动作 ， 则 可 触发 ) ， 打 开 某 个 页 面 或 弹出 提示 对 话 框 ( 目的 ) 等 。 


4.1.4 认识 “行为 ”面板 
在 Dreamweaver CS6 中 内 置 了 许多 行为 ， 
在 设计 网 页 时 ， 用 户 可 以 通过 “行为 ”面板 
对 其 进行 添加 与 编辑 ， 打 开 “ 行 为 ”面板 可 
按 ShifttF4 组 合 键 或 选择 【 窗口 ] /【 行 为】 
命令 , 打开 “标签 检查 器 ”面板 , 选择 “行为 ” 
选项 卡 即 可 ( 在 “属性 ”选项 卡 中 可 设置 表 
单 中 添加 对 象 的 属性 ) 。 
下 面 将 对 “行为 ”选项 卡 中 的 各 按钮 进 
行 介 绍 。 
如 “显示 事件 设置 ”按钮 国 : 单 击 该 按钮 后 ， 则 会 在 下 方 的 列表 框 中 显示 所 选 对 象 已 设置 
的 事件 列表 。 
人 “显示 所 有 事件 ”按钮 国 : 单 击 该 按钮 后 ， 则 会 在 下 方 的 列表 框 中 显示 Dreamweaver CS6 
中 所 有 的 事件 (添加 行为 后 ， 可 在 事件 列表 框 中 设置 相应 的 事件 ) 。 
候 “ 添 加 行为 ”按钮 国 : 单 击 该 按钮 后 ， 在 弹出 的 下 拉 列 表 中 可 根据 选择 的 选项 ， 添 加 相 
应 的 行为 。 
如 “ 朋 除 行为 ”按钮 同 : 单 击 该 按钮 后 ， 在 弹出 的 下 拉 列 表 中 可 根据 选择 的 选项 ， 删 除 相应 
的 行为 。 
如 “增加 事件 值 ”按钮 国 : 单 击 该 按钮 后 ， 将 会 把 当前 所 选 定 的 行为 向 前 移 。 
办 “降低 事件 值 ”按钮 回 : 单 击 该 按钮 后 ， 将 会 把 当前 所 选 定 的 行为 向 后 移 。 


4.1.5 ”行为 的 应 用 


了 解 行为 和 “行为 ”面板 后 ， 则 可 在 网 页 中 使 用 相应 的 行为 增加 网 页 的 一 些 特殊 效果 。 下 
面 将 在 “form_check.html” 网 页 中 添加 表单 行为 ， 其 具体 操作 如 下 : 


性 [为 | 村 答 ea 


an 
i 切换 到 “行为 ”列表 框 Ea i 
打开 “form_check.html” 网 页 , 选择 [ 窗口 ]/【 行 
为 ] 命 令 , 打开 “标签 检查 器 ”面板 。 在 该 面板 中 
选择 “行为 ”选项 卡 ， 切 换 到 行为 列表 框 中 。 


二 hf 

1.， 在 “行为 ”选项 卡 中 ， 单 击 “ 添 加 行为 ” 按 
钮 思 。 

2. 在 弹出 的 下 拉 列 表 中 选择 “弹出 信息 ”选项 ， 
打开 “弹出 信息 ”对 话 框 。 


EE fis 

1. 在 打开 对 话 框 的 "消息 ”文本 框 中 输入 信息 。 

2.， 单 击 功 酉 天 按钮 , 完成 弹出 信息 行为 的 添加 ， 
在 预览 时 ， 则 可 弹出 该 对 话 框 。 


mn: [ :| 
[aor | 


域 
“本 GD 
or 


日 电子 邮件 地 址 。 同 数字 从 
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本 本 本 添加 “检查 表单 " 行为 


1. 在 表单 中 单 击 匿 到 按钮 。 


2.， 在 “行为 ”选项 卡 


中 单 击 “添加 行为 ” 按 


钮 固 ， 在 弹出 的 下 拉 列 表 选 择 “ 检 查 表单 ` 


选项 。 


AGE 6 地， 设置 检查 表单 域 


1.， 在 打开 对 话 框 的 “ 域 ”列表 框 中 选择 第 一 个 


对 象 。 
2， 在 “ 值 ” 栏 中 选中 四 


EE 引 复 选 框 。 


完 第 一 个 对 象 的 表单 域 。 


4. 在 “ 域 ” 列 表 框 中 选择 第 二 个 对 象 ， 重 复 上 


个 所 子 邮件 地 址 。 回 数字 从 


述 操作 ， 但 在 “可 接受 ” 栏 中 选中 下 全 引 单 选 


按钮 。 
5 单 击 训 本 到 按钮 ， 完 


成 检查 表单 域 操作 。 
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wi 预览 效果 
在 浏览 器 中 进行 预览 时 则 会 出 现 一 个 提示 对 
话 框 ， An 

2. 如 果 在 什么 都 没有 输入 的 情况 下 ， 直 接 单 击 
E 红 按钮 ， 则 会 打开 错误 提示 框 。 在 “密码 ” 
文本 框 中 输入 不 属于 数字 的 文本 ， 单 击 攻 四 按 i 
钮 也 会 打开 提示 密码 错误 的 对 话 框 。 pp 


剧目 四 JI 编辑 “login.html” 登 录 页 面 
久 进一步 掌握 表单 的 创建 方法 。 进一步 掌握 行为 的 使 用 方法 。 


I 
1 和 所 进一步 掌握 表单 对 象 的 添加 与 属性 设置 方法 。 川 | 


本 次 实例 将 在 “login.html” 网 页 中 添加 表单 ， 在 表单 中 添加 相应 的 表单 对 象 ， 并 对 表单 
对 象 进行 属性 设置 ， 最 后 添加 行为 ， 其 效果 如 下 图 所 示 。 


TE 打开 “标签 编辑 器 ”对 话 框 


打开 “login.html" 网 页 , 切换 到 “代码 "视图 中 ， 
将 插入 点 定位 到 添加 表单 的 位 置 。 

2.， 选择 [插入 】/[ 表单 ]/[ 表单 ] 命 令 , 打开 “ 标 
签 编 辑 器 ”对 话 框 。 


本 本 设置 表单 属性 
在 打开 对 话 框 的 “操作 ”文本 框 中 输入 
“checklogin.php” 
2.， 在 “方法 ”下 拉 列 表 框 中 选择 “post” 选 项 。 
3.， 分 别 将 “名 称 " 和 “目标 ”设置 为 “form" 和 ”_ 


设置 事件 


在 对 话 框 左 侧 列表 框 中 选择 “onSubmit” 事 
件 选 项 。 

2. 在 右 侧 的 列表 框 中 输入 代码 “return chkLogin 
(this)”， 以 实现 客户 端 表单 验证 。 

3.， 单 击 匡 柄 天 按钮 ， 完 成 表单 的 添加 与 属性 
设置 。 


CU) 剪 切 ) 


<DIY class=title_ 5>¢/DIV> 


<LI>KSEAN2 账 号 ; </SEAN> 
<LI>KSPAN> 密 码 ; </SPAN> 《FONT 
class=forgecl>cA 
hrer=rhccp://www.enl8 .con/user/gecpassword. php"> 忘 记 密 到 ?</A> 
/FouT> 
LI style="MARSIN-TOR: 10px; FoNT-5IZE: 12px: TIxT-INDENT: 。 司 
Gopx"> 
<LI clasc-eipay 使 用 公用 电脑 时 请 妇 寺 择 该 顶 
le-"PRDDINS-LEFT: 60px"> 
otips err id-crror ssyle-"DISPLAY: none®> 
Ly</ Uy/ DIN> 
aaaarend。 
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toginnwml x Us Le PODeoD oon ean ron 


本 本 本 汉沽 </orm> 代码 的 位 置 

1. 选择 表单 结束 标签 “</form>”， 按 Ctrl+X 
组 合 键 将 其 剪 切 。 

2. 将 鼠标 光标 定位 到 第 一 个 “<!-- 表单 代码 结 
束 -->” 注 释 语 之 后 ， 按 CtrltV 组 合 键 将 
其 粘贴 。 


wi 添加 文本 字段 


切换 到 小 设计 "视图 中 , 将 插入 点 定位 到 " 账 
”文本 之 后 。 
2. 在 “插入 ”面板 中 选择 “表单 ”选项 ,在 
其 列表 框 中 单 击 “文本 字段 ”按钮 区 ]。 
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I 输入 标签 辅助 功能 属性 


打开 "输入 标签 辅助 功能 属性 "对 话 框 ,在 “ID” 
文本 框 中 输入 “username”。 
2. 其 他 保持 默认 设置 ， 单 击 匡 栈 到 按钮 ， 完 成 
文本 字段 对 象 的 添加 。 


[cc 
生生 
人 @ 全 月 -br 两 生 附加 标 竺 标记 
开 却 后 月桂 标 记 环 究 
操 无 大 标记 


位 置 加 在 委 项 前 
全 太 末 # 基 后 
沪 占 各 Tab 刍 素 引 : 


加 果 在 插入 对 旬 时 不 起 输入 此 所 自 ， 过 豆 改 - 对 
ER 


+RBt EE 


1， 在 表单 中 选择 添加 的 文本 字段 
对 象 。 

2 在 “属性 ”面板 的 “字符 宽度 " 
文本 框 中 输入 “25”。 

3. 在 "类 ”下 拉 列 表 框 中 选择 
“Usergray” 选 项 。 
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ED。 复制 文本 字段 对 旬 


1. 选择 账号 后 的 文本 字段 对 象 。 


2. 按 住 Ctrl 键 的 同时 ， 使 用 鼠标 左 键 拖 动 文本 


字段 对 象 至 “密码 ”文本 之 后 。 


和 
相 


机 本 更 改 文本 字段 的 属性 


1. 选择 复 制 后 的 文本 字段 对 象 。 


2 在 “属性 ”面板 的 “文本 域 ”文本 框 中 输入 


复制 的 文本 字段 对 象 的 名 称 “password”。 
3. 在 “最 多 字符 数 ” 文 本 框 中 输入 “16”。 


丁丁 古稀 本 


1. 在 “使 用 公用 电脑 时 请 勿 使 用 该 选项 ”之 前 
添加 复 选 框 。 
2.， 在 “属性 ”面板 中 的 “ 选 定 值 ”文本 框 中 输 


入 "1" 。 
3. 在 “ 复 选 框 ”名 称 文本 框 中 输入 复 选 框 名称 
"check” 。 


AGE 重量 。 添加 图 像 域 

1.， 切换 到 “代码 ”视图 中 , 将 插入 点 定位 到 “<LI 
style="PADDING-LEFT 60px">” 之 后 。 

2， 在 “插入 " 面板 的 “表单 "列表 框 中 单 击 "图 
像 域 "按钮 国 ， 打开 “标签 编辑 器 ”对 话 框 
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AGE 二 设置 图 像 域 对 象 


1.， 在 打开 对 话 框 的 “名 称 ”文本 框 中 输入 图 像 
域 的 名 称 “imagebutton”。 

2. 单 击 匡 栈 加 按钮， 完成 图 像 域 的 添加 。 

3. 切换 到 "设计" 视图 中 , 选择 图 像 域 , 在 “属性” 
面板 的 “类 ”下 拉 列 表 框 中 选择 “btn” 选 项 。 
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本 本 添加 客户 端 表 单 验证 Dw EE IE 
HR 和 (昌吉 看 括 AD 人 xIM tO) S$(Q 站 SS OW Rh) 
切换 到 “代码 ”视图 中 ， 在 <BODY> er mm tb 


标签 之 前 输入 代码 “<SCRIPT language= 
javascript src="img/jquery.min. 
js"></SCRIPT> 和 <SCRIPT 
language=javascript src="img/passport. 
DS oI 


六根 二 
全 
在 “img/passportjs” 文 件 中 ， 该 文件 依 ， 


赖 “img/jquery.minjs” 文 件 ， | | 
汐 加 史 中 公信 加 人 让 丙 信 交 们 的 引 风 | 


4.2 制作 动态 网 页 


对 于 一 些 信息 量 较 大 的 网 站 而 言 ， 只 制作 静态 网 页 不 能 满足 用 户 的 需求 ， 因 此 需要 制作 动 
态 网 页 来 支持 大 量 数据 的 存放 。 在 浏览 器 中 用 户 所 查看 的 网 页 一 般 都 是 动态 网 页 ， 由 数据 库 支 
持 数据 的 存放 。 动 态 网 页 有 数据 库 的 支持 后 ， 不 仅 可 以 对 网 页 进行 快速 更 新 ， 还 可 以 方便 网 站 
的 维护 、 读 取 数据 。 下 面 将 对 动态 网 页 的 制作 以 及 支持 动态 网 页 的 数据 库 创 建 、 连 接 、 增 加 、 
删除 和 修改 的 操作 方法 进行 介绍 。 
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LK/ 1 和 Unicods WF-6) 


,掌握 数据 库 的 创建 方法 。 熟悉 数据 库 与 动态 网 页 的 链接 方法 。 
1 入 熟悉 动态 站 点 的 创建。 掌握 数据 记录 的 增加 、 有 删除 和 修改 方法 。 
4.2.1 创建 数据 库 


数据 库 ( DataBase， 简 称 DB ) 是 指 长 期 存储 在 电脑 中 、 有 组 织 且 可 供 共享 的 数据 集合 。 
目前 常见 的 数据 库 包 括 Access ( 是 一 种 简单 的 数据 库 管 理 系 统 ， 用 于 小 型 企业 管理 数据 ) 、 
MSSQL( 是 一 种 数据 库 开发 软件 , 用 于 大 中 型 企业 管理 数据 )、MySQL( 是 一 种 数据 库 开 发 软件 ， 
Sit ) 和 Oracle ( 是 目前 最 大 的 关系 型 数据 库 开发 软件 ， 支 持 多 平台 。 
大 型 企业 管理 数据 ) 
下 面 将 以 在 Access 2010 办 公 软 件 中 创建 名 为 “UserInformdb” 的 数据 库 为 例 ， 介 绍 创 建 
Access 数据 库 的 方法 ， 其 具体 操作 如 下 : 


一 筹 能 一 一 认识 动态 网 页 


有 些 用 户 会 认为 有 动态 元 素 的 网 页 可 称 之 为 动态 网 页 ， 这 是 一 个 错误 的 观点 ， 加 入 动态 元 素 的 
网 页 最 多 只 能 称 之 为 媒体 网 页 ， 而 不 能 称 之 为 动态 网 页 ， 因 为 它 未 与 服务 器 端 发 生 交互 。 


表单 与 动态 网 页 的 制作 


本 丁克 二 二 阔 据 库 


启动 Access 2010， 打 开 “Access 2010” 的 工 
作 界 面 ， 选 择 【 文 件 ] /【 新 建 】 命令 ， 在 打开 的 
界面 中 ， 直 接 双 击 “ 空 数据 库 ” 按 钮 总 ， 创 建 空 
白 数 据 库 。 


iil 


本 丁丁 添加 数据 表 的 字段 


1. 在 打开 的 窗口 的 右 侧 表格 中 ， 单 击 “ 单 击 以 
添加 ” 右 侧 的 下 拉 按 钮 同 ， 在 弹出 的 下 拉 列 
表 中 选择 “文本 ”选项 。 

2. 在 该 文本 框 中 输入 “用 户 ”。 


晤 在 创建 效 据 表 时 ， 在 单 击 “ 单 击 以 i 
系 加 ” 右 侧 的 下 拉 按 钮 二 后， 弹出 的 下 拉 列 表 | 
的 选项 是 用 于 设置 该 列 的 数据 类 型 。 | 


记 台 "第 1 项 共 1 丙 MH | 太志 2 | 扫 


醒 醒 古里 加 数据 表 的 其 他 字段 


使 用 相同 的 方法 , 在“ 用户” 字段 后 输入 “密码 ”， 
并 将 其 设置 为 “文本 ”型 字段 。 


LEI 
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输入 数据 表 数 据 并 保存 


在 字段 名 下 方 输入 用 户 名 和 密码 。 

2.， 按 Ctrl+S 组 合 键 ,打开 "另存 为 "对话 框 , 在 " 表 
名 称 ”文本 框 中 输入 “userinfo”。 

3， 单 击 EEBE 汪 按钮。 

4. 在 表格 右上 角 单 击 * 按 钮 。 


ne 用 户 字 段 前 | 

[D 字段 用 于 区 分 数据 记录 ， 该 字段 会 在 给 ， 
| a 自动 输入 ， 用 户 也 可 以 手动 进行 | 
| 2 但 不 能 重复 。 J 


机 本 人 在 数据 库 


1. 选择 【文件 ]/ 数据 库 另 存 为 ] 命 令 , 打开 “ 另 
存 为 ”对 话 框 。 在 打开 对 话 框 的 “保存 位 置 ” 
下 拉 列 表 框 中 选择 数据 库 文件 的 保存 位 置 。 

2.， 在 “保存 类 型 ”下 拉 列 表 框 中 选择 “Microsoft 
Access 数据 库 ” 选 项 。 在 “文件 名 ”文本 框 
中 输入 数据 库 文件 的 名 称 “user_DB”。 

3.， 单 击 匡 Bee 按钮， 关闭 Access 2010 完成 数 

据 库 的 创建 。 


一 筹 乱 一 一 创建 数据 表 须 知 


在 同一 个 数据 库 中 ， 可 创建 多 个 数据 表 ， 所 以 在 同一 个 网 站 中 ， 最 好 只 使 用 一 个 数据 库 ， 并 在 
数据 库 中 创建 多 个 不 同 的 数据 表 来 满足 网 站 的 需求 。 如 果 在 同一 个 网 站 使 用 多 个 数据 库 ， 则 需 
要 连接 不 同 的 数据 库 。 


表单 与 动态 网 页 的 制作 


4.2.2 动态 站 点 的 创建 及 配置 (IIS 配置 ) 


在 开发 动态 网 站 前 ， 必 须 在 Dreamweaver 或 动态 网 页 开发 软件 中 建立 一 个 动态 站 点 ， 方 


便 管 理 网 站 中 的 各 种 文件 。 若 要 在 浏览 器 中 预览 动态 站 点 中 的 网 页 ， 还 需要 在 IS 中 添加 并 设 
置物 理 路 径 。 下 面 将 以 创建 “QQ_Login” 站 点 为 例 ， 讲 解 动态 站 点 的 创建 及 配置 。 其 具体 操 


作 如 下 : 


NN 


EE 打开 “添加 网 站 ”对 话 杠 


打开 “Internet 信息 服务 ( IIS ) 管理 器 ”窗口 ， 

在 左 侧 窗 格 中 展开 各 选项 , 选择 "网 站 ”选项 。 
2.， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 添 

加 网 站 ”命令 ， 打 开 “ 添 加 网 站 ”对 话 框 。 


对 于 要 发 布 的 动态 或 静态 网 站 都 需 | 
在 TS 中 添加 ， 才 能 在 其 他 电脑 中 访问 ， 其 | 
| 中 动态 网 站 必须 发 布 后 才能 在 浏览 器 中 预览 J 


丁丁 设置 网 站 的 物理 路 径 

1， 在 打开 对 话 框 的 “网 站 名 称 ” 文 本 框 中 输入 
要 发 布 网 站 的 名 称 首页 ， 这 里 输入 “index”。 

2， 在 “物理 路 径 ” 后 ， 单 击 加 按钮， 打开“ 浏 
览 文件 夹 ”对 话 框 ， 选择 网 站 所 在 的 文件 夹 。 

3， 单 击 已 本 本 按 包 。 
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RED 最。 完成 网 站 添加 


1. 返回 “添加 网 站 ”对 话 框 中 ， 便 可 查看 到 设 


置 的 物理 路 径 。 


2. 其 他 保持 默认 设置 ， 单 击 国 怠 汪 按钮 ， 完 成 
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添加 网 站 的 设置 ， 关 闭 所 有 对 话 框 及 窗口 。 


从 > 中 添加 的 网 站 ， 不 能 同时 使 用 | 
同 的 端口 号 ， 若 端口 号 相同 时 ， 需 停 止 其 中 ， 


. 亲 个 网 站 的 运 和 | 
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全 新 建站 点 


在 Dreamweaver CS6 中 选择 [ 站 点 ] 儿 新 
建站 点 ] 命 令 , 在 打开 的 对 话 框 中 选择 "站 
点 ”选项 。 

在 右 侧 窗 格 的 “站 点 名 称 ” 文 本 框 中 输入 
“QQ Login” 。 

在 “本 地 站 点 文件 夹 ”文本 框 中 输入 网 站 
路 径 “HAQQ_Loginv 。 


AGE 最 服务 器 的 基本 配置 


1 


在 该 对 话 框 左 侧 选择 “服务 器 ”选项 ， 在 右 
侧 窗 格 中 单 击 因 按 钮 ， 在 打开 的 对 话 框 中 选 
择 “ 基 本 ”选项 卡 。 

在 "服务 器 名 称 " 文本 框 中 输入 "login " 。 在 " 连 
接 方法 ”下 拉 列 表 框 中 选择 “本 地 /网 络 ” 选 
项 。 在 “服务 器 文件 夹 ”文本 框 中 输入 “HA:\ 
QQ_Login”。 在 “Web URL" 文本 框 中 输入 
“http://127.0.0.1”。 
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本 丁丁 服务 器 的 高 级 配置 


1. 在 该 对 话 框 中 选择 “高 级 ”选项 卡 。 

2.， 在 “服务 器 模型 ”下 拉 列 表 框 中 选择 “ASP 
VBScript” 选 项 。 

3. 单 击 [_ 迎 | 按钮 ， 完 成 服务 器 配置 。 


本 本 本 完成 站 点 创建 


1. 在 返回 对 话 框 右 侧 的 窗 格 中 ， 选 中 “远程 ” 
和 “测试 ”下 方 的 复 选 框 。 

2， 单 击 忆 三 一 ] 按 钮 ， 完 成 整个 站 点 的 创建 及 配 
置 。 


表单 与 动态 网 页 的 制作 
4.2.3 动态 网 页 与 数据 库 的 连接 


通过 动态 网 页 操作 数据 库 必 须 先 创建 数据 库 连 接 ， 即 在 动态 网 页 与 数据 库 之 间 进 行 联 
系 ， 让 双方 的 数据 通过 此 联系 进行 交换 。 但 此 前 提 是 创建 好 数据 库 ， 并 将 数据 库 放 到 动态 站 点 
中 对 站 点 进行 配置 。 

下 面 将 在 Dreamweaver CS6 中 创建 动态 网 页 ， 并 与 创建 好 的 数据 库 进 行 连接 ， 其 具体 操作 


创建 动态 网 页 


在 Dreamweaver CS6 中 , 选择 【文件 ]/[【 新 
建 】 命令， 打开 “新 建文 档 ” 对 话 框 。 
2. 选择 “空白 页 ”选项 。 
3. 在" 页面 类 型 ”列表 框 中 选择 "ASP 


VBScript” 选 项 。 : 登 性 ee 
4。 在 “布局 ”列表 框 中 选择 “无 ”选项 。 i aaa 
5， 单 击 [要 面 本 按钮 ， 创 建 空白 动态 网 页 。 i 

CRD -anc-] 

AGE 最 保存 动态 网 页 并 打开 we 
1. 将 创建 的 动态 网 页 保存 为 “login_db.asp”。 J 
2， 选 择 【 窗口 ]/[ 数据 库 ] 命令 , 打开 “数据 库 ” 

面板 ， 单 击 国 按钮 。 
3. 在 弹出 的 下 拉 列 表 中 选择 “数据 源 名 称 ae 

( DSN ) ”选项 , 打开 “数据 源 名 称 ( DSN ) ” 

对 话 框 。 


sp 设置 数据 源 

1.。 在 打开 对 话 框 的 “连接 名 称 ”文本 框 中 输入 
“conn”。 

2， 在 “数据 源 名 称 " 下 拉 列 表 框 中 选择 "userINF” 
选项 。 

3， 单 击 EE 寺 本 按钮 , 测试 是 否 链接 数据 库 成 功 ， 
如 果 成 功 则 会 弹出 成 功 的 提示 。 

4 单 击 医 绽 司 按 钮 ， 关 闭 对 话 框 便 可 以 查看 
效果 。 


32 《 
Hour: 
从 


Hour: 


[J 有 混和 计 新手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


上 经 验 一 筹 乱 一 一 添加 数据 源 DNS 


在 使 用 “数据 源 ” 名 称 选 项 时 ， 需 要 添加 测试 服务 器 的 驱动 ， 否 则 会 导致 连接 数据 时 出 错 。 其 
方法 是 : 通过 在 “控制 面板 ”中 双击 “管理 工具 ”超级 链接 , 在 打开 的 对 话 框 中 双击 “数据 源 ( odbc )” 
选项 ， 在 打开 的 对 话 框 中 选择 “系统 DNS” 选项 卡 ， 单 击 攻 age 滞 按 钮 ， 在 打开 的 对 话 框 中 选择 
“Microsoft Access Driver(*.mdb)” 选 项 ， 单 击 三 宣 呈 按钮， 在 打开 对 话 框 的 “数据 源 名 ”文本 
框 中 输入 名 称 “conn”, 单 击 区 芭 Sjea 按 钮 , 在 打开 对 话 框 中 选择 数据 库 所 在 路 径 后 再 选择 数据 库 ， 
然后 依次 单 击 匡 静 汪 按钮 


4.2.4 数据 库 动态 网 页 

在 数据 库 中 的 行 称 为 记录 ， 列 称 为 属性 ， 数 据 库 中 有 多 少 行 就 有 多 少 条 记录 。 数 据 库 最 
简单 的 操作 就 是 读 取 记录 、 插 入 记录 、 删 除 记录 和 更 改 记录 。 执 行 这 些 操作 除了 要 链接 数据 库 
外 ， 还 需要 选择 数据 记录 所 在 的 表 。 下 面 将 对 在 网 页 中 如 何 读 取 、 删 除 和 更 改 数据 库 表 中 的 数 
据 的 方法 进行 讲解 。 

1. 读 取 数 据 库 中 的 记录 

在 制作 网 页 时 ， 可 以 不 用 在 网 页 中 直接 添加 数据 ， 而 是 从 数据 库 的 表 中 读 取 数据 ， 这 样 
就 不 会 占用 网 页 的 空间 ， 从 而 提升 浏览 速度 。 


下 面 将 在 “index.asp” 网 页 中 对 已 经 创建 的 数据 库 中 的 数据 进行 读 取 操作 ， 其 具体 操作 


AGE 0 情 。 添加 记录 集 

1， 在 “QQ_Login” 管 理 站 点 中 ， 打 开 “index. 
asp” 动 态 网 页 。 

2.， 选择 [ 窗口 M[ 绑 定 ] 命 令 , 打开 " 绑 定 "面板 ， 

单 击 固 按钮， 在 弹出 的 下 拉 列 表 中 选择 “ 记 

录 集 ( 查询 ) ”选项 。 


在 Dreamweaver CS6 中 成 功 创 建 | 
连接 脚本 后 ， 会 自动 在 站 点 根 文件 夹 下 创建 | 
“Connections” 文件 夹 , 并 创建 “conn.asp” 文件 。 | 
El 


设置 记录 集 


在 打开 对 话 框 的 “名 称 ”文本 框 中 输入 记录 
集 的 名 称 “rd”。 

2.， 在“ 连接” 下拉 列表 框 中 选择 数据 库 连 接 
“conn” 选 项 。 

3， 在 “表格 ”下 拉 列 表 框 中 选择 要 操作 的 表 
“user_table” 选 项 。 

4. ”其 他 保持 默认 设置 后 ， 单 击 匡 对 天 按钮 完成 记 
录 集 的 添加 。 


AGE 最 添加 动态 表格 


1.， 打开“ 插入 ”面板 ， 在 “数据 ”选项 的 列表 


= 
框 中 单 击 “ 动 态 数据 ”前 的 下 拉 按 钮 回 。 127 
2。 在 弹出 的 下 拉 列 表 中 选择 “动态 表格 " 选项 ， 5 


打开 “动态 表格 ”对 话 框 。 


AGE 二。 设置 动态 表格 5 
1.， 在 打开 对 话 框 的 “记录 集 ” 下 拉 列 表 框 中 选 相 
择 a ”选项 。 


3 在 "边框" 文本 框 中 输入 "2"。 
4。 其 他 保持 默认 设置 后 ， 单 击 E 可 本 按钮 完成 动 pa 
态 表格 的 设置 。 全 


机 本 太志 格 标 是 , 


在 动态 网 页 中 可 查看 到 添加 的 表 记 录 集 ， 将 第 一 “人 
行 中 每 个 表格 中 的 标题 依次 改 为 “编号 ”、“ 用 
户 名 ”和 “用 户 密码 ”。 


给 时 “| 用 记名 ”| 用 户 密友 _ 


Hour: 


| 
加 . 本 直 器 认 =j 训 0| a EE 


EL 王 让 让 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


ma 
在 Dreamweaver CS6 中 ， 按 F12 键 ， 在 浏览 
中 进行 预览 。 


2. 添加 记录 


在 动态 网 页 中 要 将 输入 的 用 户 信息 保存 到 数据 库 中 ， 可 以 使 


实现 。 


ss) 


SEOFEEE 


“插入 记录 ”服务 器 行为 来 


下 面 将 在 “QQ_Login” 站 点 中 创建 insert.asp 动态 网 页 ， 并 使 用 该 网 页 对 数据 进行 添加 ， 


其 具体 操作 如 下 : 


AGE 二 创建 记录 集 


1， 在 “QQ_Login"” 管理 站 点 中 ， 新 建 “insert. 
asp” 动 态 网 页 。 
2.， 打开“ 记录 集 ” 对 话 框 进行 记录 集 设置 。 


aa 


”在 动态 网 页 中 ， 第 一 次 创建 记录 集 ， 9 
“ 绑 定 ” 面 板 单 击 固 按钮 进行 添加 ， 如 ， 
果 要 直行 修改 、 删除 或 其 他 操作 ， 则 可 在 慑 | 
| 务 器 行为 ” 面板 中 单 击 四 按钮 进行 设置 。 | 


a 

机 本 hnia 录 

1， 在 “插入 "面板 的 “数据 " 选项 卡 中 单 击 “ 插 
入 记录 ”前 的 下 拉 按钮 回 。 

2.， 在 弹出 的 下 拉 列 表 中 选择 “插入 记录 表单 向 
导 " 选项 ， 打开“ 插入 记录 表单 对话 框 


lili! 


表单 与 动态 网 页 的 制作 


AGE 二 设置 记录 

1. 在 打开 对 话 框 的 “连接 ”下 拉 列 表 框 中 选择 
“conn” 选 项 。 

2.， 在 “插入 到 表格 ”下 拉 列 表 框 中 选择 需 将 数 
据 插 入 的 表格 "user_table”。 

3.， 在 “插入 后 ， 转 到 ”文本 框 中 输入 插入 数据 
成 功 后 将 显示 成 功 信息 的 页 面 。 


i 删除 多 余 表 单字 自 


1. 在 “表单 字段 ”列表 框 中 选择 第 一 项 。 


DULL Sr re | 


2。 单 击 电 按钮 将 其 删除 。 | ED 9 


bb be bb bebe 


Gj) | SH。 设置 标 答 及 提交 类 型 


= = 1.， 在 “表单 字段 " 列表 框 中 分 别 选择 表单 字段 。 


i 2。 在 “标签 " 文本 框 中 输入 标签 文本 分 别 为 “用 5 
bn ZR 户 名 : "和 “密码 : "。 4 


3， 在 “显示 为 ”下 拉 列 表 框 中 选择 表单 对 象 。 
= 4。 在 “提交 为 ”下 拉 列 表 框 中 选择 数据 类 型 。 
as "a 5。 单 击 E 本 本 按 钮 , 完成 标签 及 提交 类 型 的 操作 。 


Dw mn » i 
2 骗 声 (E) 会 者 (V) ea 弟 人 SI 口 。 站 (5) 安 D(W) 各 BCH) ‘STEP 06: - 完成 添加 


查看 完成 插入 记录 添加 后 的 编辑 窗口 显示 效果 。 32 
保存 网 页 并 进行 预览 ， 输 入 数据 后 单 击 [EX 要] 按 “人 
钮 完成 数据 的 添加 。 


Hour: 


有 则 i 襄 计 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


3. 更 改 记录 


月 户 在 动态 网 页 中 添加 的 信息 ， 如 更 改 QQ 登录 的 用 户 名 或 密码 等 ， 此 时 需要 对 已 存 入 数 


据 库 的 记录 进行 修改 ， 则 可 使 用 “修改 记录 ”服务 器 行为 实现 修改 效果 ， 其 方法 与 添加 记录 的 
方法 基本 相同 。 其 方法 为 :首先 在 需要 更 改 记录 的 动态 网 页 中 插入 记录 集 ， 然 后 在 “插入 ” 面 
板 的 “数据 ”选项 卡 中 单 击 “更 新 记录 ”前 的 下 拉 按 钮 加， 在 打开 的 对 话 框 中 进行 设置 ， 设 置 


完成 后 即 可 在 网 页 中 查看 其 效果 。 


出 


经 验 一 敌 管 设置 记录 集 

修改 记录 是 针对 某 条 或 某 类 型 的 记录 ， 因 此 
在 创建 记录 集 时 必须 在 “记录 集 ” 对 话 框 中 
定义 筛选 条 件 ， 否 则 无 法 完成 修改 记录 操作 。 
并 且 在 预览 结果 时 ， 在 浏览 器 中 只 会 显示 第 
一 条 记录 ， 如 果 要 修改 其 他 记录 ， 则 可 在 浏 
览 器 的 地 址 栏 中 输入 “?id=2”， 显 示 第 二 条 
记录 进行 修改 。 


4. 删除 记录 


ET 
updateasp? X 


都 定 
SR sa ts? Viseript GO| 


Cae 


i 


当 数据 库 中 的 某 些 数 据 不 需要 时 可 以 将 其 删除 ， 如 QQ 用 户 需要 注销 其 用 户 名 ， 则 需要 删 
除数 据 库 中 的 该 条 记录 ， 可 以 通过 “删除 记录 ”实现 。 删 除 记录 时 也 需要 先 传递 参数 ， 然 后 根 


据 这 个 参数 进行 记录 的 删除 。 


下 面 将 在 “QQ_Login” 管 理 站 点 中 新 建 del.asp 动态 网 页 ， 并 在 该 网 页 中 使 用 数据 删除 的 


功能 ， 其 具体 操作 如 下 : 


ANEE 6 间 。 创建 记录 集 


时 


在 “QQ_Login” 管 理 站 点 下 新 建 一 个 动态 网 
页 ， 并 命名 为 “del.asp”。 

打开 “记录 集 ” 对 话 框 ， 在 其 中 连接 数据 库 
和 选择 表 。 

在 “筛选 ”下 拉 列 表 框 中 选择 “ID” 选 项 ， 
其 余 保持 默认 设置 。 

单 击 晤 嘲 末 按钮 。 


AGE 创建 动态 表格 


. 在 "插入 "面板 中 的 “数据 "选项 卡 下 , 单 击 " 动 


态 数据 ”前 的 下 拉 按钮 回 ， 在 弹出 的 下 拉 列 表 
中 单 击 “ 动 态 表格 ”按钮 国 。 

打开 “动态 表格 ”对 话 框 ， 在 “显示 ”后 的 
文本 框 中 输入 “3”， 其 余 保 持 默认 设置 。 

单 击 世 呈 本 按钮 ， 返 回 到 网 页 编辑 区 中 即 可 查 
看 其 效果 。 


EE 


表单 与 动态 网 页 的 制作 


wn - i .LoL > 


wa 修改 标题 


分 别 将 表格 中 第 一 行 中 的 所 有 标题 改 为 “ 编 
号 ”、“ 用 户 名 ”和 “密码 ”。 


.。 在 最 后 一 列 单元 格 处 插入 一 列 单元 格 ， 并 在 


插入 的 第 一 个 单元 格 中 输入 “操作 ”。 


5 st 


1. 将 插入 点 定位 到 表格 中 的 最 后 一 个 单元 
格 中 ， 插 入 表单 ， 并 在 表单 中 添加 一 个 
按钮 。 

2. 选中 刚 添加 的 按钮 ， 在 “属性 ”面板 的 
"动作 ”后 选中 加 提交 表 单 6j 单 选 按钮 。 

3 在 “ 值 ” 文 本 框 中 输入 “删除 ”， 所 添 
加 按钮 上 的 文本 则 会 变 为 删除 。 


32 《 
Hour: 
A 


Hour: 


[2 有 i 襄 和 庆 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


二 mia | 

1.， 在 “插入 " 面板 的 “数据 ”选项 卡 中 , 单 击 “ 删 
除 记录 ”按钮 散 。 

2. 打开 “删除 记录 ”对 话 框 ， 在 “连接 ”下 拉 

列表 框 中 选择 “conn” 选 项 。 

3. 分 别 将 其 他 项 设置 为 “user_table”、“rd”、 es QD 

“ID” 和 "form1” 。 

4 在 “删除 后 ， 转 到 ”文本 框 中 输入 “del. 
asp”。 


5， 单 击 EEss-| 按 钮 ， 完 成 删除 记录 设置 。 


i 


完成 删除 记录 的 添加 后 ， 返 回 到 网 页 编辑 区 中 ， 
可 查看 到 Dreamweaver 自动 在 表单 中 添加 了 两 
个 隐藏 域 ， 用 于 记录 ID 值 及 表单 名 称 。 


a i 


| 保存 网 页 并 预览 ， 单 击 某 记录 后 的 国 可 按钮 就 可 以 


删除 该 记录 。 


5 Ee FE 四 
@ hapy/localhosvdela P ene ‘sTEP 07: 预览 效果 


和 经 验 一 筹 能 一 一 删除 提示 


用 户 可 根据 Dreamweaver 提供 的 代码 进行 修改 , 即 在 单 击 国史] 按钮 时 应 先 弹出 一 个 提示 对 话 框 ， 
询问 是 否 要 进行 删除 操作 ， 也 可 以 添加 行为 进行 提示 。 


国 上 EN 制作 登录 动态 网 页 


& 进一步 掌握 IIS 的 配置 及 动态 站 点 的 创建 方法 。 
1 ”人 @ 进 一 步 学 握 数据 库 连接 的 方法 。 


驴 进一步 学 习 和 掌握 服务 器 行为 的 添加 方法 。 用 | 


本 例 将 制作 登录 动态 网 页 ， 实 现 用 户 输 入 数据 库 中 所 存在 的 用 户 名 与 密码 后 进行 登录 的 
功能 。 制 作 过 程 中 ， 首 先 需 要 配置 IS 及 动态 站 点 ， 让 动态 网 页 与 数据 库 进行 链接 ， 再 进行 登 
录 动 态 网 页 的 制作 。 最 终 效果 如 下 图 所 示 ， 其 中 左 图 为 数据 库 表 数据 ， 右 图 为 效果 图 。 


于 加 
cni gczmgqa。36T19781 
5403972558Q 540397255 
269851144aq 269851144 
542365280a，5423652 
5452167548q 545218T34 
59B12S569qq 57B1235 


142551154aa 142551154 
58794621812 S124039854 512403 
584231354L 

12408372558 1240337255 


5429851144@ 5429851144 可 
Fy py ee ] 四 


本 本 建站 点 文件 天 


将 提供 的 素材 复制 到 H 盘 下 ， 完 成 本 地 站 点 文件 
夹 的 创建 ， 打 开 文 件 夹 ， 即 可 查看 其 文件 夹 中 的 
所 有 内 容 。 


NN 电脑 中 的 某 个 磁 | 
下 新 建 一 个 文件 天 ， 作 为 站 上 文件 类 即 可 。 ， 


ER， 配置 1S 


1.， 在 “信息 服务 (1IS ) 管理 器 ”窗口 中 ， 展 开 
左 侧 窗 格 中 的 所 有 目录 ， 选 择 “ 默 认 网 站 ” 
选项 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 
选择 “添加 虚拟 目录 ”命令 。 

2.， 在 打开 对 话 框 中 的 “别名 ”文本 框 中 输入 
“login”。 

3， 在 “物理 路 径 ” 文本 框 中 输入 “H:\login_ 
asp”， 单 击 ERE 按 钮 ， 完 成 IIS 的 配置 。 


表单 与 动态 网 页 的 制作 


堆 喜 您 ， 登 录 成 功 ， 系 统 将 过 5 秒 自 
动 跳 转 到 网 站 首页 ! 


:eeeee 


吕 i 住 用 户 各 ? 


由 Ee 
Eam SMTP 电 于 ~ 


| 屋 Pe9 旧 


使 用 md5 文件 进行 加 密 ， 可 防止 数据 库 中 
保存 的 密码 使 用 md5 格式 存在 数据 库 中 ， 
在 网 页 中 输入 密码 后 ， 则 会 与 数据 库 中 的 
密码 进行 匹配 以 判断 是 否 正确 。 


62 《 
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区 风 区 辐 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


mi 配置 本 地 站 点 


在 Dreamweaver CS6 中 选择 【 站 点 】/【 管 
理 站 点 ] 命令， 在 打开 对 话 框 的 “站 点 名 称 ” 
文本 框 中 输入 “login_asp”。 

2.， 在 “本 地 站 点 文件 夹 ”文本 框 中 输入 “H:\ 


login_asp\” 。 


机 本 jnid 录 
1、 在 该 对 话 框 的 左 侧 选择 “服务 器 ”选项 。 
2， 在 右 便 单 击 国 按钮 


1 


AGE 服务 癌 的 基本 配置 


1. 在 打开 对 话 框 的 “基本 ”选项 卡 的 “服务 器 
名 称 ”文本 框 中 输入 “login_asp”。 

2. 分 别 将 其 他 选择 设置 为 “本 地 /网 络 ”、“H:\ 
login_asp” 和 “http://localhost”。 


也 人 “Web URL” 文本 框 中 输 
) 本 地 服务 器 。 


1. 在 打开 的 对 话 框 中 选择 “高 级 ”选项 卡 。 

2.， 在 “服务 器 模型 ”下 拉 列 表 框 中 选择 “ASP 
VBScript” 选 项 。 

3.， 单 击 [_ 迎 | 按钮 。 

. 在 返回 的 对 话 框 中 选中 "测试 "下方 的 复 选 框 。 


本 本 7 开 风 页 来 材 


在 “文件 "面板 中 双击 "login.asp" 网 页 ,将 其 打开 。 


AGE 号。 连接 数据 库 


1 打开“ 数据 库 ” 面 板 ， 单 击 四 按钮 。 

2. 在 弹出 的 下 拉 列 表 中 选择 “数据 源 名 称 
( DSN ) ”选项 , 打开 “数据 源 名 称 ( DSN ) ” 
对 话 框 。 


LI 


Drearrweayer 让 连接 站 使 用 旭 放 服务 呈 上 的 DSN 


疯 使 用 本 地 DSN 


表单 与 动态 网 页 的 制作 


Dw EE = 
de ts esc et se ed 


AGE 最 设置 数据 源 

1. 在 打开 对 话 框 的 “连接 名 称 ” 文 本 框 中 输入 
"conn” 。 

2.， 在 “数据 源 名 称 ” 下 拉 列 表 框 中 选择 “con" 
选项 。 

3. 其 余 保持 默认 设置 ， 单 击 EEsE 汪 按钮 ， 完 成 
数据 源 设置 。 


本 nia 

1. 打开 “记录 集 ” 对 话 框 ， 设 置 名 称 和 连接 的 
数据 源 。 

2. 单 击 硬 要 到 按 钮 ， 完 成 添加 记录 和 集 的 操作 。 


42 < 
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[J 有 有 当 籽 二 计 | 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


本 丁克 添加 “登录 用 户 ” 服务 器 行为 


在 “服务 器 行为 ”面板 中 ， 单 击 国 按钮 。 在 弹出 
的 下 拉 列 表 中 选择 “用 户 身份 验证 ”/“ 登 录用 户 " 


AGEEID 允 设置 登录 用 户 


在 打开 的 对 话 框 进行 设置 。 设 置 完成 后 ， 单 击 
村 按钮 。 


LI 


ER 


Z| onyocnosnconp ~ o EE 


如 志 任用 户 各 亲王 服务 再 行为 


[password 


has2hui_aser 
区 


如 果 痘 录 成 功 ， 转 到 ; ok. htnl 


回 半 到 前 一 人 URL ( 如 果 它 存在 ) 
扣 果 本 录 失 败 ， 转 到 :ero. htn | 


至 于 以下 项 腿 抽 访问. 回 用 广 名 和 宙 码 
占用 广 名 、 玛 和 访问 最 到 
获取 地 别 自 : 1 


‘STEP 13: ~ 添加 md5.asp 引用 


切换 到 代码 视图 ， 将 鼠标 光标 定位 到 第 2 行 
后 ， 按 Enter 键 换行 ， 添加 md5.asp 的 引用 代 
码 。 向 下 滚动 编辑 窗口 ， 找 到 代码 “Request. 
Form("password")”, 将 其 修改 为 “md5(Request. 
Form("password"))”。 


1. 完成 设置 后 ， 进 行 保存 并 预览 ， 在 登录 页 面 
输入 用 户 名 和 密码 。 

2.， 单 击 世 于 对 按钮 ， 如 果 登 录 成 功 则 会 打开 
ok.html 网 页 ， 否 则 会 打开 erro.html 网 页 。 


表单 与 动态 网 页 的 制作 
4.3 练习 1 小 时 


本 章 主要 对 表单 、 行 为 和 制作 动态 网 页 等 知识 进行 了 介绍 ， 如 动态 网 站 的 配置 、 数 据 库 
的 建立 和 连接 等 。 这 些 知识 都 需 用 户 通 过 练习 进行 巩固 ， 达 到 熟 能 生 巧 的 目的 。 下 面 就 以 练习 
制作 “注册 ”表单 页 面 和 制作 “注册 ”动态 页 面 为 例 进行 巩固 。 


(1 制作 “注册 ”表单 页 面 


本 例 将 练习 制作 "注册 "表单 页 面 ,制作 过 程 主要 包括 添加 表单 、 设 置 表单 中 的 各 种 属性 、 
调整 表单 代码 、 添 加 表单 对 象 并 进行 属性 设置 ， 以 及 使 用 Dreamweaver 自 带 的 “检查 表单 ” 
行为 进行 客户 端 表 单 验证 等 ， 最 终 效 果 如 下 图 所 示 。 


了 32 放款 入 证 过 的 雪 字 。 看 不 青天 ? 请 点 击 ! 
我 忆 既 仔 各 可 讼 并 网 章 辑 务 大 全 


立交 注册 


站 六根 Ee 
| 六 “注册 ”表单 页 面 时 ， 先 将 提供 的 素材 网 页 打开 ， 切 换 到 “代码 ”视图 中 ， 将 插入 
点 定位 至 合适 的 位 置 ， 添 加 表单 (此 注册 页 面 是 使 用 DIV 标签 谈 套 两 个 表单 ) ; 使 用 “属性 ”面板 
| 设置 表单 的 各 种 属性 ; 在 表单 中 添加 表单 对 象 并 对 表单 对 象 进行 属性 设置 ; 最 后 使 用 Dreamweaver 
| CS6 中 自 带 的 “检查 表单 ”行为 进行 客户 端 表单 验证 。 


[Er rr 
读书 笔记 


局 
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(2， 制作 “注册 ”动态 页 面 

本 例 将 制作 “注册 ”动态 页 面 ， 即 对 用 户 提交 的 表单 信息 进行 处 理 。 制 作 过 程 主要 包 
括 创 建 数据 库 文件 、 配 置 TS、 创建 动态 网 站 及 测试 服务 器 、 让 动态 网 页 与 数据 库 进行 链接 
以 及 插入 数据 库 记 录 等 操作 。 如 果 注册 成 功 则 为 右上 角 第 一 个 效果 ， 否 则 为 右 下 角 第 二 个 
效果 ， 其 最 终 效果 如 下 图 所 示 。 


名!9 币 ， 免费 用 加 入 磋 们 ， 取 刘 和 1)0005 网 有 交 肌 友 ， 坟 和 有 元 限于 史 宙 空间 : 


TS | 藉 喜 您 ， 注 册 成 功 ， 系 统 将 过 5 秒 自 


ER 动 跳 转 到 网 站 首页 ! 


二 
TE SPF 


rr IE 
as 三 ss 和 三 了 


Be} 


QC 
138 注册 失败 
72 品 抱 坎 ， 注 册 失 败 ， 请 重新 注册 。 系 统 
Hours 将 过 5 秒 自动 跳 转 到 注册 页 面 ! 


， 态 网 页 添加 记录 集 , 并 在 “服务 器 行为 " 面板 中 添加 “插入 记录 ” 行为 插入 成 功 转 到 okhtnl 网 页 中 )，| 
| 再 添加 “检查 新 用 户 名 ”服务 器 行为 (重复 记录 转 到 erro.html 网 页 中 ) ; 在 “代码 ”视图 中 引用 md5. | 
，asp 文件 ， 并 修改 代码 “Request.Form("usr_pass1")” 为 “md5(Request.Form("usr pass1"))”， 最 后 保存 网 | 


第 
绘制 与 编辑 Flash 图 形 二 


学 习 AN: @ Flash 的 基础 知识 

区 本 有 站 和 呈 且 忆 丰 基本 天 人 于 导 天 下 各 玉 六 大 学 本 忆 居 产 各 导 导 及 实生 皇居 宇 呈 导 S 天 六- 维 肖 | 与 弓 对 

动画 是 网 页 中 不 可 缺少 的 元 素 之 一 ， 它 能 够 ， 。 ei 
使 网 页 的 效果 更 加 动感 、 绚 丽 。 其 中 Flash CS6 是 : @ 编辑 对 象 
目前 最 新 版 的 动画 制作 软件 之 一 ， 其 界面 简洁 、 缠 轩 到 
操作 简单 ， 是 大 多 数 网 页 制作 人 员 的 首选 。 本 @ @ 
章 将 主要 对 Flash 的 基础 知识 进行 讲解 ， 再 通过 ; 
Flash 绘制 与 填充 对 象 、 制 作文 字 等 ， 使 动画 效果 
与 网 页 内 容 相符 合 。 


上 机 9 小 时 


证 滞 新手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


5.1 Flash 的 基础 知识 


Flash 是 由 Adobe 公司 开发 的 专业 矢量 图 形 编辑 和 动画 创作 软件 ， 它 主要 应 9 络 动画 、 
网 页 动画 及 交互 效果 的 制作 ， 利 用 Flash 制作 的 广告 动画 作品 能 够 清楚 地 表现 出 广告 主题 ， 并 
具有 文件 短小 、 精 悍 以 及 画面 表现 力 强 等 特点 。Flash 有 强大 的 编辑 、 处 理 功能 且 操 作 界面 简洁 ， 
这 使 得 Flash 更 加 容易 学 习 和 进行 动画 开发 。 在 没有 学 习 使 用 Flash 制作 动画 前 ， 用 户 还 需 了 
解 Flash 的 一 些 基础 知识 。 


INES ------ 


a 快速 认识 Flash CS6 的 工作 界面 。 所 掌握 Flash CS6 的 基础 操作 。 


， &, 灵活 运用 Flash CS6 的 辅助 工具 。 


5.1.1 Flash CS6 工作 界面 

启动 Flash CS6 所 打开 的 窗口 就 是 其 工作 界面 ，Flash CS6 的 工作 界面 主要 由 标题 栏 、 菜 
单 栏 、“ 时 间 轴 ”面板 、“ 动 画 编辑 器 ”面板 、“ 颜 色 ” 面 板 、“ 属 性 ”面板 、“ 库 ”面板 以 
及 “工具 ”面板 和 场景 组 成 。 


了 


山 


ED Te 站 一 标题 栏 
菜单 栏 CE) ”视图 (V) 插入 (I) 正 改 (M) 文本 (和 命令 (OQ 控制 (0) 让 式 D) 窗口 (W) 帮助 (H) “属性 ” 面板 名 
Ra 


“工具 ”面板 


“动画 编辑 器 ”面板 


ET Te | 


Flash CS6 工作 界面 中 各 部 分 作用 如 下 。 

忆 标题 栏 : 主要 用 于 显示 软件 名 称 和 当前 文档 信息 ， 和 其 他 软件 一 样 可 以 单 击 标题 栏 右边 的 
[IST x ] 校 钮 进行 最 小 化 、 最 大 化 、 还 原 和 关闭 操作 。 在 标题 栏 上 单 击 国 二 国 下 拉 按 钮 
可 以 选择 Flash CS6 的 操作 界面 ， 如 “设计 人 员 ” 。 

介 菜单 栏 : 菜单 栏 位 于 标题 栏 的 下 方 , 主要 包括 文件 、 编 辑 、 视 图 、 插 入 、 修 改 、 文 本 、 命 令 、 
控制 、 调 试 窗口 和 帮助 等 菜单 项 。 在 制作 Flash 动画 时 ， 通 过 执行 相应 菜单 中 的 命令 ， 即 
可 实现 特定 的 操作 。 

让 “时间 轴 ” 面 板 : 用 于 创建 动画 和 控制 动画 的 播放 进程 。“ 时 间 轴 ”面板 左 侧 为 图 层 区 ， 
该 区 域 用 于 控制 和 管理 动画 中 的 图 层 ; 右 侧 为 帧 控制 区 ， 由 播放 指针 、 帧 、 时 间 轴 标尺 和 
时 间 轴 视图 等 部 分 组 成 。 


绘制 与 编辑 Flash 图 形 


只 “动画 编辑 器 ”面板 : 使 用 该 面板 ， 在 动画 的 基础 上 更 加 精确 地 编辑 动画 效果 ， 方 便 调 
整 各 个 属性 ; 通过 关键 帧 导航 按钮 创建 和 删除 关键 帧 ， 并 方便 地 在 各 关键 帧 之 问 跳 转 ， 
是 更 高 级 的 缓 动 控制 方式 。 

公 “颜色 ”面板 : 主要 用 于 绘图 颜色 的 填充 以 及 对 颜色 的 编辑 。 

如 “属性 ”面板 : “属性 ”面板 是 一 个 非常 实用 而 又 特殊 的 面板 ， 有 特定 的 参数 选项 ， 而 
且 会 随 着 选择 对 象 的 不 同 而 出 现 不 同 的 参数 ， 以 方便 用 户 设置 对 象 的 属性 。 

四 “ 库 ” 面板 : 主要 用 于 管理 图 形 、 影 片 剪 辑 、 按 钮 、 位 图 、 上 声音 以 及 动画 片段 等 。 

人 “工具 ”面板 : 主要 由 编辑 、 创建 功能 的 工具 以 及 工具 的 相应 选项 组 成 , 可 用 于 绘制 、 选择、 
修改 图 形 、 绘 图 和 填充 图 形 等 。 

但 场景 : 是 指 动画 的 显示 区 域 。 


1 经 验 一 筹 乱 一 一 显示 、 隐 藏 面板 的 方法 


由 于 在 Flash 中 拥有 很 多 面板 ， 为 了 正常 地 显示 场景 ， 很 多 面板 在 不 使 用 时 都 会 被 隐藏 起 来 
等 需要 时 ， 再 将 其 显示 。 显 示 、 隐 藏 面板 的 方法 分 别 介绍 如 下 。 
所 显示 面板 : 在 Flash 工作 界面 左边 ， 找 到 需要 显示 的 面板 按钮 ， 单 击 该 按钮 即 可 显示 隐藏 的 
面板 。 如 单 击 “ 库 ”面板 按钮 高 ， 即 可 显示 该 面板 。 
介 隐藏 面板 : 在 需要 隐藏 的 面板 上 单 击 其 右边 的 国 按 钮 ， 即 可 将 该 面板 隐藏 。 


5.1.2 ”Flash CS6 的 基础 操作 


在 认识 Flash CS6 的 工作 界面 后 ， 用 户 就 可 以 学 习 Flash CS6 的 基础 操作 ， 为 后 面 制作 
Flash 动画 打下 基础 。 在 Flash 中 经 常 进行 的 基础 操作 包括 新 建 Flash 动画 文档 、 保 存 动 画 文档 、 
关闭 动画 文档 、 打 开 Flash 动画 文档 和 设置 动画 文档 属性 等 。 下 面 分 别 讲解 它们 的 操作 方法 。 

1. 新 建 Flash 动画 文档 
在 制作 动画 之 前 ， 用 户 同样 需要 新 建 一 个 动画 文档 。 在 Flash CS6 中 新 建 动画 文档 主要 有 
以 下 两 种 方法 。 

从 通过 欢迎 界面 新 建 : 启动 Flash CS6， 在 ”人 使 用 菜单 命令 新 建 : 选择 【文件 】/【 新 建 】 
其 欢迎 界面 的 “新 建 ” 栏 中 选择 “ActionScript ” 命令, 在 打开 的 “新 建文 档 ” 对 话 框 的 “常规 ” 
3.0” 选 项 新 建 Flash 文档 。 选项 卡 中 选择 一 种 要 创建 的 文档 类 型 ， 再 单 

击 [| 按钮， 新建 Flash 文档 。 


虽 (wh 5 全 素 


9 
二 AR for rd + 豆 [HF 400 便于 
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2. 保存 和 关闭 Flash 动画 文档 
保存 和 关闭 Flash 动画 文档 是 也 是 Flash 操作 中 最 基础 并 且 最 常用 的 操作 ， 下 面 分 别 进行 
介绍 。 


(1) 保存 Flash 动画 文档 GOes jr | 


2| 
rr 


图 


在 制作 动画 和 对 动画 进行 修改 后 ， 需 要 
对 其 进行 保存 以 便 下 次 继续 编辑 。 保 存 Flash 
动画 文档 的 方法 是 : 选择 【文件 ] /【 保存 】 
命令 或 按 CtrltS 组 合 键 ， 打开“ 另存 为 ”对 
话 框 ， 在 “保存 在 ”下 拉 列 表 框 中 选择 保存 
路 径 ， 在 “文件 名 ”下 拉 列 表 框 中 输入 文档 
名 称 ， 单 击 EsEsa 习 按钮 ， 保 存 文档 。 


(2 ) 关闭 Flash 动画 文档 
动画 文档 编辑 完成 后 , 需要 关闭 文档 , 在 Flash CS6 中 关闭 动画 文档 的 方法 主要 有 以 下 几 种 。 
人 愉 使 用 按钮 关闭 : 在 动画 文档 的 标题 栏 右 侧 单 击 国 按钮 ， 可 关闭 当前 编辑 的 动画 文档 。 
个 使 用 命令 关闭 : 选择 【文件 】/【 关 闭 】 命 令 ， 或 按 Ctrl+W 组 合 键 ， 可 关闭 当前 编辑 的 动 
画 文档 。 


‖ 经 验 一 筹 能 一 一 快速 关闭 所 有 的 动画 文档 


选择 【文件 】/【 全 部 关闭 〗】 命 令 ， 或 按 Ctrl+AltrW 组 合 键 ， 可 关闭 Flash CS6 中 所 有 打开 的 动 
画 文档 。 


3. 打开 Flash 动画 文档 
在 制作 动画 时 ， 通 常 需要 对 已 存在 的 动 Dj 一 | 
画 文档 进行 编辑 ， 要 编辑 该 文档 ， 就 需要 打 soae@l| 


开 该 文档 。 在 Flash CS6 中 ， 打 开动 画 文档 | 
的 方法 是 : 启动 Flash CS6, 选择 【文件 ] 作 打 te) 


开 】 命令, 打开“ 打开” 对话 框 。 在 “查找 (1 选 Dan2gamg th 
范围 ”下 拉 列 表 框 中 选择 文档 所 在 的 位 置 ， 
并 选择 需 打开 的 Flash 文档 。 单 击 臣 Ee 按钮 ， 
打开 文档 。 除 此 之 外 ， 双 击 需要 打开 的 Flash 
动画 文档 图 标 也 可 打开 该 文档 。 


4. 设置 动画 文档 属性 
创建 Flash 动画 文档 后 用 户 可 通过 “属性 ”面板 设置 文档 属性 。 在 “属性 ”面板 中 设置 动 
画 文档 背景 、 大 小 和 帧 频 等 属性 ， 其 设置 方法 如 下 。 
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公设 置 背景 颜色 : 新 建 一 个 Flash 文档 。 选 ”从 设置 文档 大 小 : 在 “属性 ”面板 的 “大 小 ” 
择 【 窗 口 】 人 属性】 命令 ,打开 “属性 ” 面板，  ” 栏 中 ， 输 入 文档 的 宽度 和 高 度 。 除 此 之 外 ， 
单 击 “ 舞 台 ” 后 的 场景 色 块 。 在 打开 的 选 色 ”用 户 还 可 单 击 “ 大 小 ” 栏 后 的 国 按钮 ， 在 打 
器 栏 中 ， 将 鼠标 光标 移动 到 色 块 上 单 击 选取 开 的 “文档 设置 ”对 话 框 中 的 “尺寸 ”数字 
背景 颜色 。 框 中 设置 文档 大 小 。 


和 办 设 置 帧 频 : 在 “属性 ”面板 中 ， 将 鼠标 光 
标 移动 到 “FPS” 热 文本 上 ， 按 住 鼠 标 左 键 


向 右 拖 动 ， 当 数值 为 30 时 ， 松 开 自 标 左 键 ， 在 “新 建文 档 ” 对 话 框 中 选择 了 新 建文 档 的 
设置 好 帧 频 。 也 可 单 击 热 文本 ， 在 出 现 的 文 A 
本 框 中 直接 输入 动画 帧 数 。 Rg 
属性 
3 
FL ee NW 5 
发 丰 
配置 文件 : 默认 
发 布设 置 ， 


5.1.3 ”使 用 辅助 工具 

在 制作 动画 时 ， 为 了 得 到 精确 的 动画 效果 ， 用 户 往往 需要 使 用 标尺 、 辅 助 线 和 网 格 对 图 形 

对 象 进行 准确 定位 。 
本 例 就 将 打开 “小 怪兽 la” 动画 文档 ， 并 在 其 中 显示 标尺 、 网 格 以 及 辅助 线 ， 并 对 网 格 、 

辅助 线 进 行 设 置 ， 使 用 户 掌握 在 Flash 中 使 用 辅助 工具 的 方法 ， 其 具体 操作 如 下 : 


Hour: 
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二 RR 

启动 Flash CS6。 打 开 “ 小 怪兽 .fla” 动 画 文档 。 
选择 【视图 】/【 标尺】 命令 ,此 时 在 场景 左 侧 和 
上 方 将 显示 标尺 。 


按 ShiftrCtrlHAltHR 组 合 键 也 可 ， 
示 标 尺 。 若 想 隐 藏 标尺 ， 只 需 再 次 按 Shift+ ， 
CHAItHR 组 合 键 。 | 


导 We” 


丁丁 @ 示 并 编辑 网 格 


1.， 选择 【视图 】/【 网 格 】/【 显示 网 格 ) 命令 ， 
在 场景 区 域 显示 网 格 。 

2.， 选择 【 视图 】/【 网 格 】 /【 编辑 网 格 】 命 令 ， 
打开 “网 格 ”对 话 框 。 单 击 “ 颜 色 ” 色 块 将 
网 格 颜色 设置 为 “紫色 ( #9900FF ) ”。 

3. 选中 回 呈 十 国 复 选 框 。 

4. 在 “ 宽 " 和 “高 "文本 框 中 均 输 入 “20 像素 ”。 

5， 单 击 EERE 按钮 。 


Ey | 
[ET - 5 
[aa | we 
[OED re 
i 。 当 网 格 被 用 户 编辑 过 后 ， 可 单 击 
Ed [EGG] 掖 钮 ， 将 编辑 后 的 网 格 还 原 为 默认 | 
We(4 轨 设置 ) 设置 ， 方 便 以 后 重复 使 用 。 | 
mh 


1 


二 | ”本 本 于 加 辅助 线 


sn 刚 


“| ”选择 【视图 ] /【 辅助 线 ] /【 显示 辅助 线 】 命 令 ， 
使 辅助 线 呈 可 显示 状态 。 然 后 将 鼠标 光标 移动 到 
场景 上 方 标尺 处 ， 按 住 鼠 标 左 键 不 放 向 下 拖 动 到 
场景 中 ， 制 作出 场景 中 的 水 平 辅助 线 。 用 相同 的 
方法 从 左边 标尺 处 拖 动 鼠标 制作 出 垂直 辅助 线 。 


有 经 验 一 筹 管 一 一 清除 辅助 线 


若 不 需要 辅助 线 ， 可 选择 【视图 】/【 辅 助 
线 】〗/【 清 除 辅助 线 】 命 令 ， 将 辅助 线 清除 。 


wR 编辑 辅助 线 
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[ba ee. 
医 ET 由 亲王 站 全 选择 [ 视图 ul 畏 助 线 ] 儿 编辑 畏 雪线 ] 命令 ， 
E H 打开 “辅助 线 ” 对 话 框 。 单 击 “ 颜 色 ” 色 块 
和 将 辅助 线 颜 色 设置 为 “绿色 (#99FF00 ) " 。 
国 H pA 司 同 王 珊 三 训 和 回 三 十 山 是 加 | 复 选 
1 | | 框 。 
局 HH 时 。 3， 单 击 [GEE 于 按钮 关闭 对 话 框 。 
引 I 上 | 
国 i I 
下 有 
了 g | ] 问 | 


出 目 国之 人 DR 新建 “banner” 动画 文 档 


巩固 启动 Flash CS6 和 创建 Flash 文档 的 方法 。 


， 进一步 掌握 Flash 界面 操作 和 文档 属性 设置 操作 。 中 | 


本 例 将 新 建 一 个 Flash 文档 ， 并 自 定 
义工 作 界 面 ， 最 后 通过 “属性 ”面板 设 
置 用户 自 定义 的 文档 属性 ， 完 成 后 的 最 
终 效 果 如 右 图 所 示 。 


sn 显示 标尺 


启动 Flash CS6。 在 欢迎 界面 的 “新 建 ” 栏 中 选 
择 “ActionScript 3.0” 选 项 ， 创 建 一 个 未 命名 的 
Flash 文档 。 


站 在 欢迎 界面 下 方 ， 选 中 加 sa 复 1 
! Si 下 次 启动 Flash 将 不 会 显示 欢迎 界面 。 Rl 


I 
才 个 验 


折 建 党 习 
[rr 日,ranw， 
痢 和 rs D2a%» 
重心 ame 
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全 ru 国 sacaoasengt 
ActonSorgt 文 千 7#s5 
scot Do ge 
Fa 要 且 。 为 于 动 说 条 媳 
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HE 展开 显示 析 析 


将 鼠标 光标 移动 到 “属性 ”面板 中 ， 单 击 敬 按 钮 ， 
展开 “属性 ”面板 。 


AGED 最 打开、 移动 面板 


按 F9 键 ， 打开“ 动作 ”面板 。 使 用 鼠标 拖 动 面板 
标题 将 其 拖 动 到 “时 间 轴 ”面板 上 。 


当 Flash 工作 界面 太 混乱 时 ， 除 了 将 工作 界面 中 的 面板 隐藏 外 ， 还 可 以 将 其 关闭 。 关闭 面板 的 
方法 是 : 将 鼠标 光标 移动 到 需 关 闭 的 面板 上 ， 按 住 左 键 不 放 拖 动 该 面板 到 场景 中 。 当 面板 单独 
存在 时 ， 单 击 其 右上 角 的 国 按钮 ， 即 可 关闭 该 面板 。 


WIR 
选择 [视图 ]/【 标尺 】 命令 显示 标尺 ， 再 选择 [ 视 。 中 一 
】/【【 网 格 ] /【 显示 网 格 】 命令 显示 网 格 。 加 国 和 H 


国 败 


TCD 
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本 0 保存 文档 


1.， 选择 【文件 】/【 保存】 命令 , 打开 “另存 为 ” 
对 话 框 。 在 “保存 在 ”下 拉 列 表 框 中 选择 保 
存 路 径 ， 并 输入 文件 名 “banner.fla”。 

2. 单 击 EEEea 按 钮 ， 保 存 文档 。 


5.2 使 用 Flash 绘制 与 填充 对 象 


Flash 自 带 了 功能 强大 的 矢量 图 形 绘制 工具 ， 它 对 Flash 动画 能 在 网 络 领域 和 广告 等 领域 PE 
中 被 广泛 应 用 起 着 非常 重要 的 作用 。Flash CS6 中 绘图 工具 有 选择 矩形 工具 、 基 本 矩形 工具 、 
椭圆 工具 、 基 本 椭圆 工具 、 多 边 形 工具 、Deco 工具 、 线 条 工具 、 铅 笔 工 具 和 钢笔 工具 等 ， 72 口 
户 可 以 通过 这 些 工具 方便 地 绘制 出 动画 中 所 需要 的 矢量 图 形 。 
在 Flash CS6 中 ， 只 有 熟练 地 掌握 绘图 工具 的 基本 操作 方法 和 必要 的 绘图 技巧 ， 才 能 绘制 
出 专业 的 图 形 ， 同 时 使 用 Flash 绘制 工具 也 是 制作 专业 动画 的 基础 。 


BEE ------ :4 


BG 快速 认识 Flash CS6 各 绘图 工具 的 作用 。 掌握 Flash CS6 绘图 工具 的 基本 操作 。 


灵活 运用 绘图 工具 绘制 矢量 图 形 。 学 握 填 充 工具 填充 图 形 的 方法 。 


5.2.1 ”使 用 标准 工具 绘制 对 象 


Flash CS6 的 标准 工具 包括 矩形 、 基 本 和 矩形、 椭圆 、 基 本 椭圆 、 多 角 星 形 和 Deco 工具 。 使 
这 些 工具 可 以 绘制 出 一 些 标准 图 形 ， 如 正方 形 、 五 角 星 以 及 花草 树木 


等 。 标 准 工具 都 放置 在 一 个 工具 组 中 ， 用 鼠标 按 住 “矩形 工具 " 国 不 放 ， | maine 从 人 
在 弹出 的 下 拉 列 表 中 选择 其 他 工具 ， 如 右 图 所 示 。 下 面 将 分 别 对 使 用 标 et te 个 
加 多 角 星 形 工具 


准 工 具 绘制 图 形 的 方法 进行 讲解 。 


1. 矩形 工具 和 基本 和 矩形 工具 

“矩形 工具 ”加 和 “基本 和 矩形 工具 ” 贺 用 于 绘制 矩形 图 
乡 ， 珑 形 工具 不 但 可 以 设置 笔触 大 小 和 样式 ， 还 可 以 通过 设 
置 边 角 半 径 来 修改 矩形 的 形状 。 其 中 ， 拢 形 工具 用 于 绘制 矩 
形状 ， 该 形状 的 任何 部 分 可 以 随意 编辑 ， 基 本 甜 形 工具 用 
于 绘制 矩形 对 象 ， 在 编辑 和 矩形 对 象 时 ， 用 户 只 能 对 整个 矩形 
对 象 编辑 。 
使 用 矩形 和 基本 竹 形 工具 的 方法 相同 ， 只 需 在 “工具 ” 
面板 中 选择 对 应 工具 ， 在 场景 中 拖 动 绘制 出 和 矩形， 按 住 Shift 
键 拖 动 可 绘制 正方 形 ， 如 右 图 所 示 。 
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筹 估 一 一 绘制 圆 角 矩 形 


选择 “和 矩形 工具 ” 回 后 ， 在 “属性 ” 
面板 中 设置 “矩形 边 角 半 径 ”为 正 
值 ， 可 以 绘制 出 圆 角 和 什 形 ， 如 右 
所 示 。 车 设置 “ 算 形 边 角 半 径 ” 为 
负 值 ， 则 可 绘制 反 角 矩形 。 


2. 椭圆 工具 和 基本 椭圆 工具 

“椭圆 工具 ”同和 “基本 椭圆 工具 ” 辆 
于 绘制 贿 圆 图 形 ， 它 们 的 使 用 方法 与 矩形 工具 
相同 。 根 据 实际 需要 ， 用 户 还 可 以 设置 椭圆 的 
内 径 ， 使 绘制 的 椭圆 呈现 水 管 一 样 的 环 状 效果 。 
其 方法 是 : 在 椭圆 工具 的 "属性 "面板 中 设置 "内 
径 ” 值 ， 设 置 完成 后 拖 动 鼠标 进行 绘制 ， 如 右 
图 所 示 。 


= 


和 经 验 一 筹 仍 一 一 设置 椭圆 角度 


若 想 绘制 被 切割 的 椭圆 ， 可 在 椭圆 工具 的 “ 属 
性 ” 面板 中 设置 开始 角度 和 结束 角度 。 设 置 
完成 后 再 拖 动 鼠标 进行 绘制 ， 如 右 图 所 示 。 
需要 注意 的 是 ， 在 设置 本 “开始 角度 ”和 “ 结 
束 角 度 ” 时 ， 当 开始 值 大 于 结束 值 时 绘制 出 
内 角 超 过 180” 的 扇形 ; 当 开始 值 小 于 结束 值 
时 绘制 出 内 角 小 于 180” 的 扇形 ; 两 者 相等 时 
则 可 绘制 出 椭圆 。 


3. 多 角 星 形 工 具 


“多 角 星 形 工具 ”四 用 于 绘制 几何 多 边 形 和 ”用 sams 
形 图 形 。 其 使 用 方法 与 矩形 工具 相同 ， 在 绘制 由 

多 边 星 形 时 ， 用 户 经 常 需要 设置 星 形 的 边 数 。 设 | 

置 星 形 边 数 的 方法 是 : 选择 “多 角 星 形 工具 ” 回 ， 二 三 人 

在 “属性 " 面板 中 ， 单 击 ER 按钮 , 打开 “ 工 有 二 至 志 

具 设置 ”对 话 框 ， 在 “ 边 数 ”文本 框 中 输入 要 绘 有 se、 
制 的 多 边 形 或 星 形 的 边 数 。 单 击 EEB 按 钮 后 , 按 由 痢 “6 到 时 
住 鼠 标 左 键 拖 动 绘制 i 
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和 经 验 一 筹 乱 一 一 设置 角形 状 


使 用 “多 角 星 形 工具 ”加 ， 不 但 可 以 绘制 多 边 
形 还 可 以 绘制 星 形 。 但 需 注意 的 是 ， 用 户 需 
要 先 对 角形 状 进行 设置 后 ， 才 能 绘制 出 对 应 
的 角形 状 。 设 置 角形 状 的 方法 是 : 打开 “ 工 
具 设 置 ”对 话 框 ， 在 “样式 ”下 拉 列 表 框 中 
可 以 选择 多 边 形 和 星 形 ， 单 击 E 旺 本 按钮 后 ， 
按 住 鼠 标 左 键 拖 动 绘制 即 可 。 如 右 图 所 示 为 
使 用 多 边 星 形 工具 绘制 的 星 形 。 


5.2.2 ”使 用 自由 工具 绘制 对 象 


Flash CS6 中 除了 标准 绘图 工具 外 ， 还 有 线条 工具 、 铅 笔 工 具 、 钢 笔 工 具 和 Deco 工具 等 ， 
这 些 工 具 可 以 自由 地 绘制 图 形 。 下 面 来 讲解 它们 的 使 用 方法 。 


1. 线条 工具 


“线条 工具 ” 圆 主要 用 于 绘制 各 种 直线 。 其 
使 用 方法 是 : 选择 “线条 工具 ” 圆 ， 在 “属性 ” 
面板 中 设置 "笔触 " 大 小 粗细 。 按 住 鼠 标 左 键 不 放 ， 
拖 动 绘制 出 直线 。 

需要 注意 的 是 ， 若 需要 绘制 特殊 角度 的 直线 
时 ， 选择 “线条 工具 ” 国 ， 按 住 Shift 键 的 同时 ， 
向 左 或 向 右 拖 动 ， 可 以 绘制 出 水 平 线段 ， 向 上 或 
向 下 拖 动 ， 可 以 绘制 出 垂直 线段 斜 向 拖 动 ， 可 
以 绘制 出 45° 的 斜 线 ， 如 右 图 所 示 。 


| 经 验 一 敌 能 一 一 设置 线条 样式 


除 绘制 不 同 粗细 的 直线 外 ， 用 户 还 可 通过 线 
条 工具 绘制 虚线 或 带 颗粒 质感 的 线条 。 其 方 
法 是 : 选择 “线条 工具 ”图 ， 在 “属性 ” 面 
板 的 “样式 ”下 拉 列 表 框 中 选择 需要 的 线条 
形状 ， 再 使 用 鼠标 拖 动 绘制 带 样式 的 直线 。 
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2. 铅笔 工具 

“铅笔 工具 ”大 可 以 很 随意 地 绘制 出 曲 
线 或 者 直线 。 其 使 用 方法 很 简单 ， 只 需 在 “ 属 
性 ”面板 中 改变 线条 样式 和 粗细 ， 再 使 用 鼠 
标 左 键 拖 动 ， 即 可 绘制 线条 图 形 。 按 住 Shift 
键 的 同时 拖 动 鼠标 可 以 绘制 出 直线 线段 ， 如 
右 图 所 示 。 


1 经 验 铅笔 工具 的 绘制 模式 


一 敌 通 


要 想 使 用 铅笔 工具 绘制 出 自然 的 铅笔 效果 ， 在 选择 “铅笔 工 
具 ” 怖 后 ， 再 在 “工具 ”面板 下 方 选 项 区 域 中 选择 出 现 的 三 种 
铅笔 绘制 模式 ， 选 择 不 同 的 绘制 模式 后 会 出 现 不 同 的 效果 ， 如 
右 图 所 示 。 


3. 钢笔 工具 

“钢笔 工具 ”网 用 于 很 精确 地 绘制 和 编辑 图 形 轮廓 ， 钢 笔 工具 几乎 能 绘制 所 有 的 形状 。 
在 使 用 钢笔 工具 绘制 线条 时 ， 钢 笔 工 具 会 出 现 不 同 的 绘制 状态 。 

本 例 将 使 用 “钢笔 工具 ” 居 、“ 铅 笔 工 具 ” 忆 和 “椭圆 工具 ” 同 绘 制 一 个 金鱼 形状 ， 使 
户 能 更 加 熟练 地 掌握 钢笔 工具 的 使 用 方法 ， 其 具体 操作 如 下 : 


机 eIR 


新 建 一 个 800 x 600 像素 、 颜 色 为 绿色 ( #33CCCC ) 
的 空白 动画 文档 。 在 “工具 ”面板 中 选择 “钢笔 工 
有 具 ”里 。 选 择 【 窗口 ]/【 属性 命令, 打开“ 属性” 
面板 ， 在 其 中 单 击 笔 触 颜色 色 块 ， 在 弹出 的 选 色 器 
面板 中 选择 “黄色 ( #FFCC00 ) ”， 再 设置 “笔触 ” 
为 "5.00"”。 


本 


1. 


STEP 04: 


STEP 05: 


鱼 的 位 置 


选择 “椭圆 工具 


无 "”。 
使 用 鼠标 在 场景 
金鱼 的 眼睛 。 


h 拖 动 绘 制 一 个 正 国 


使 用 鼠标 单 击 钢笔 路 径 的 起 点 ， 闭 合 路 径 。 
拖 动 曲线 段 ， 调 整 路 径 曲线 。 
使 用 相同 的 方法 ， 绘 制 金鱼 的 尾巴 。 


国 ， 在 “属性 ”面板 中 设置 
笔触 颜色 为 “黄色 (#FCC00 ) ”。 

单 击 “ 填 充 颜色 ” 色 块 ， 在 弹出 的 “ 选 色 器 ” 
面板 右上 角 单 击 加 按钮， 将 填充 颜色 设置 为 


， 作 为 


丽 
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STEPI02;> 绘制 钢 
使 用 鼠标 在 场景 上 方 单 击 ， 创 建 一 个 锚 点 。 

再 将 鼠标 移动 到 场景 下 方 一 点 的 位 置 ， 单 击 
并 拖 动 曲线 段 。 释 放 鼠 标 ， 绘 制 第 一 段 钢 笔 
路 径 。 


STEPI03 创建 转角 点 


使 用 相同 的 方法 在 第 一 段 钢 笔 路 径 下 方 ， 再 
绘制 一 段 钢笔 路 径 。 

按 住 Alt 键 的 同时 ， 将 鼠标 光标 移动 到 下 方 钢 
笔 路 径 结束 的 位 置 单 击 ， 将 该 锚 点 转换 为 转 
角 点 。 
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丁丁 而 和 绘制 鲍鱼 纹 理 


1.， 选择 “铅笔 工具 ” 辆 ， 在 “工具 ”面板 下 方 
的 选项 区 域 中 ， 选 择 “ 平 滑 ” 选 项 。 
2. 使 用 鼠标 在 金鱼 身体 上 绘制 纹理 。 


为 绘制 效果 的 美观 性 ， 用 户 在 绘制 | 
纹理 时 ， 也 可 将 铝 笔 工 具 的 笔触 颜色 设置 ， 


4. Deco 工具 

在 绘制 一 些 特定 图 案 时 ， 用 户 并 不 需要 
一 笔 一 画 地 绘制 ， 而 可 以 选择 使 用 “Deco 工 
具 ” 勋 来 绘制 Flash 预 设 的 一 些 几何 形状 或 
图 案 。 使 用 Deco 工具 的 方法 是 : 在 “工具 ” 
面板 中 选择 “Deco 工具 ” 咬 ,， 打 开 “ 属 性 ” 
面板 。 在 该 面板 的 “绘制 效果 ” 栏 中 提供 了 
Flash 预 设 的 13 种 绘制 效果 。“ 高 级 选项 ” 
栏 用 于 根据 选择 的 绘制 效果 ， 设 置 产生 效果 
的 详细 数值 。 完 成 设置 后 使 用 鼠标 在 图 像 上 
拖 动 即 可 绘制 选择 的 图 像 ， 如 右 图 所 示 。 


5.2.3 ”为 对 象 填 充 颜 色 


有 时 需要 对 图 形 填 充 颜色 ， 在 Flash CS6 中 可 以 使 用 


“颜料 桶 工 


具 ” 网 为 对 象 填充 颜色 ， 


也 可 以 使 用 “渐变 变形 工具 ” 芒 对 颜色 进行 编辑 ， 此 外 在 “颜色 ”面板 中 还 有 丰富 的 颜色 选择 ， 


方便 用 户 填充 出 形式 多 样 的 颜色 对 象 。 


本 例 将 使 用 “颜色 ”面板 、“ 颜 料 桶 工具 ”网 和 “渐变 变形 工具 ” 


国 对 “海滩 fla” 动画 


文档 填充 颜色 ， 使 用 户 熟 练 掌握 在 Flash 中 填充 形状 的 方法 ， 其 具体 操作 如 下 : 


re 填充 风景 


打开 “海滩 .fa” 动 画 文档 。 在 “工具 ”面板 

中 选择 “颜料 桶 工具 "网, 选择 [ 窗口 ][ 颜色 】 
命令 , 打开 “颜色 " 面板 , 在 "颜色 " 面板 的 “#"” 
文本 框 中 输入 “CC9966”。 

2.， 将 鼠标 光标 移动 到 沙滩 区 域 单 击 填充 该 区 域 。 
使 用 相同 的 方法 ， 分 别 将 海 、 天 空 、 草 和 五 
头 填 充 为 “#003399”、 “#0099CC”、 
“#006600” 和 “#996600”。 
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ke 

1.， 选择 “颜料 桶 工具 " 加 ,打开 “颜色 ”面板 。 
在 “颜色 类 型 " 下 拉 列 表 框 中 选择 “线性 渐变 ” 
选项 。 

2. 在 '# ”文本 框 中 输入 “FF9966”。 单 
击 右边 的 色 块 ， 用 相同 的 方法 设置 颜色 为 
"#E9E99F”。 


1.， 将 光标 移动 到 沙滩 区 域 ， 按 住 左 键 由 中 间 向 


右 下 方 拖 动 ， 将 沙滩 填充 为 渐变 色 。 153 
2， 使 用 相同 的 方法 , 将 天 空 填充 为 #0099CC” 、 3 
“#93FFFF”， 海 水 填充 填充 为 “#003399”、 Hours 


“#0E93F7”。 


ta 

1. 在 “颜色 ”面板 的 “颜色 类 型 ”下 拉 列 表 
框 中 选择 “ 径 向 渐变 ”选项 ， 设 置 渐 变 为 
“#C9D7C4” 和 “#98BFFF”。 

2. 使 用 鼠标 单 击 云 末 , 使 用 径 向 渐变 填充 图 形 。 


方式 


Eb 


“STEP 05: 渐变 变形 工具 


在 “工具 ”面板 中 按 住 “任意 变形 工具 ”网 不 放 ， 
在 弹出 的 下 拉 列 表 中 选择 “渐变 变形 工具 ” 荀 ， 
单 击 云 从 ， 出 现 控制 点 ， 拖 动 各 控制 点 调整 渐变 
ea 位 置 等 属性 。 


Hour: 
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ASNER 06: 完成 编 加 

调整 完成 后 ， 使 用 鼠标 单 击 另 一 采 云 ， 使 用 相 后 
的 方法 调整 渐变 效果 。 完 成 后 在 空白 处 单 击 ， 取 
消 图 形 的 选择 。 


一 筹 乱 一 一 填充 图 形 的 轮廓 线条 


使 用 “颜料 桶 工具 ”区 只 能 对 图 形 内 部 区 域 颜色 进行 填充 ， 而 要 填充 图 形 的 轮廓 线条 ， 需 要 使 用 
“墨水 瓶 工具 ”项 ，“ 墨 水 瓶 工 具 ” 砚 可 用 于 更 改线 条 或 形状 轮 廊 的 笔触 颜色 、 宽 度 和 样式 等 。 
其 方法 是 : 在 “工具 ”面板 中 按 住 “颜料 桶 工具 ” 欧 不 放 ， 在 弹出 的 下 拉 列 表 中 选择 “墨水 瓶 工 
具 ” 哆 ， 然 后 在 “属性 ”面板 中 设置 笔触 颜色 、 笔 触 大 小 的 参数 ， 最 后 将 鼠标 光标 移动 到 需要 填 
充 的 图 形 区 域 单 击 ， 图 形 线条 的 颜色 将 会 被 重新 填充 。 


| 上 机 1 ee 绘制 小 花 图 形 


纺 巩固 使 用 基本 给 绘图 方法 和 图 形 的 编辑 方法 。 


。 tt ed 吊 | 


本 例 将 灵活 使 用 绘图 工具 绘制 小 花 图 形 ， 并 综合 应 用 填充 工具 为 图 形 填充 颜色 ， 完 成 后 的 
效果 如 下 图 所 示 。 
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AGE te 济 

打开 “小 花 fla” 动画 文档 ， 选 择 “ 钢 笔 工具 ” 较 ， 
在 "属性 ”面板 中 设置 笔触 颜色 为 “红色 
(#FF0000 ) ”，“ 笔 触 ” 为 “1.00”。 绘 制 如 
右 图 所 示 的 花瓣 线条 。 


在 绘制 花 准 前， 最 好 将 场景 放大 。 1 
| 


方法 是 :在 场景 栏 右上 角 的 下 拉 列 表 框 中 输 
| 入 需要 放大 的 比例 值 。 有 


复制 并 旋转 图 形 


使 用 “任意 变形 工具 ” 吴 选 择 花 瘀 图 形 。 将 
花瓣 中 心 的 中 心 旋转 点 向 花 斩 下 方 移动 。 

2.， 选择 [ 窗口 ]/ 变形 ] 命 令 , 打开 “变形 " 面板 。 
在 其 中 设置 “旋转 ”角度 为 “30.0° ”。 

3. 单 击 11 次 “重复 选区 和 变形 ”按钮 贺 ， 复 制 
花 办 。 


HE 修改 图 形 

1 选择 “椭圆 工具 " 回 ， 在 “属性 ”面板 中 设置 
填充 颜色 为 无 颜色 ， 绘 制 一 个 圆 形 。 

2， 使 用 “选择 工具 ” 轿 选 择 圆 形 ， 并 将 其 移动 到 
花 淤 中 心 位 置 。 分 别 使 用 “选择 工具 "图 单 击 
选择 花 辩 中 不 需要 的 线条 ， 然 后 按 Delete 键 
删除 。 


RE 

1， 使 用 "钢笔 工具 " 关 , 在 “属性 "面板 中 设置 " 笔 
触 颜色 、 笔 触 大 小 ”为 “绿色 ( #00FF66 ) 、 
2.00" 。 

2. 拖 动 鼠标 绘制 叶子 线条 。 


32 € 
Hour: 
人 


Hour: 
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STEP05:。 填充 国 形 


1.， 选择 “颜料 桶 工具 ”网 ,打开 “颜色 ”面板 ， 
在 “颜色 类 型 ”下 拉 列 表 框 中 选择 “ 径 向 渐 
变 ” 选 项 。 设 置 渐变 颜色 为 “#E9385F” 和 
“#FFBDFA”。 

2.， 使 用 鼠标 单 击 花 办 有 有 以 及 花艺 ， 为 其 上 色 。 

3 在 "颜色 "面板 中 , 设置 渐变 颜色 为 "#09B825” 
和 "#2ADBD0”。 在 叶子 上 拖 动 鼠标 为 它们 
填充 颜色 。 


在 为 绘制 的 花 辩 、 叶 子 填充 颜色 时 ， 用 户 可 能 会 发 现 使 用 “ 颜 
料 桶 工具 ” 殉 无 法 对 部 分 花 兰 和 叶子 填充 颜色 。 这 是 因为 花 辩 
和 叶子 接口 处 没有 封闭 好 ， 使 “颜料 桶 工具 ” 殉 无 法 正常 进行 
填充 。 想 要 解决 这 种 情况 ， 可 选择 “颜料 桶 工具 ”网 后 ， 在 “ 工 
具 ” 面 板 的 选项 区 域 中 单 击 久 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 
允许 填充 的 空 阶 范 围 。 


5.3 制作 动画 特效 文字 

和 其 他 图 形 处 理 软件 一 样 ，Flash 也 提供 了 文本 工具 。 在 制作 Flash 动画 时 ， 文 本 是 不 可 
缺少 的 重要 元 素 ， 合 理 地 安排 文本 ， 会 使 作品 更 加 丰富 多 彩 。 它 常用 于 媒体 展示 、MTV 和 广 
告 等 作品 中 。 在 Flash CS6 中 ， 可 以 设置 传统 文本 和 TLF 文本 。 传 统 文本 是 Flash 中 早期 文本 
引擎 的 名 称 ， 传 统 文本 引 警 在 Flash 中 仍然 可 用 ， 但 已 由 更 新 的 TLF 文本 引擎 替代 。 在 大 多 数 
情况 下 ， 都 使 用 新 的 TLF 文本 。 


目 上 EEC ------ 
驴 快速 掌握 输入 文本 的 方法 。 人 进一步 掌握 文字 属性 的 设置 方法 。 


”多 灵 活 为 文字 添加 小 镜 效果 。 | | 


5.3.1 使 用 文本 工具 输入 文本 

在 “工具 ”面板 中 ， 选 择 “ 文 本 工具 ” 
按钮 国 ， 在 “属性 " 面板 的 “文本 引擎 ”下 
拉 列 表 框 中 选择 需要 的 文本 引擎 选项 。 再 在 
“字符 ” 栏 中 设置 “系列 、 样 式 、 大 小 、 颜 
色 " 等 参数 。 然 后 将 鼠标 移动 到 场景 中 单 击 ， 
当 出 现 文本 插入 点 后 即 可 输入 文本 ， 如 右 图 
所 示 。 
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Flash 提 供 了 两 种 类 型 的 文本 容器 , 点 文本 和 区 域 文本 . 其中, 点 文本 容器 只 需 用 户 单 击 即 可 输入 ， 
文本 容器 的 大 小 由 点 文本 中 的 文本 多 少 决定 。 而 通过 鼠标 拖 动 绘制 一 个 文本 框 ， 在 文本 框 中 则 
可 输入 区 域 文本 , 区 域 文本 可 通过 “选择 工具 ”出 调整 大 小 ,调整 时 只 需 双 击 容器 下 方 的 空心 圆 点 。 
如 下 图 所 示 为 使 用 TLF 文本 输入 的 点 文本 和 区 域 文本 。 


点 文本 | 


上 1 经 验 一 先知- 


5.3.2 ”设置 文本 属性 


在 Flash 中 要 实现 一 些 特殊 的 文本 效果 和 功能 ， 都 需要 对 文本 的 属性 进行 设置 。 下 面 将 讲 
解 Flash 中 常用 的 文本 属性 的 设置 方法 。 

1. 跨 多 个 容器 的 流动 文本 

当 动画 中 的 文本 过 多 时 ， 为 了 美观 ， 用 户 往往 会 将 文本 分 别 放置 在 多 个 文本 容器 中 。 但 如 
果 将 文本 分 别 复制 在 不 同 的 文本 容器 中 ， 不 同 容器 并 不 容易 统一 调整 。 为 了 避免 这 种 情况 ， 
户 可 对 多 个 容器 之 间 的 文本 进行 串 接 。 

需要 注意 的 是 设置 文本 串 接 仅 适用 于 TLF ( 文本 布局 框架 ) 文本 ， 不 适用 于 传统 文本 块 。 
设置 文本 串 接 的 方法 是 ， 首 先 选 择 “ 文 本 工具 " 国 ， 在 “属性 "面板 的 “文本 引擎 ”下 拉 列 表 
框 中 选择 “TLF 文本 ”选项 。 将 鼠标 光标 移 动 到 场景 上 按 住 左 键 拖 动 创建 文本 容器 ， 在 其 中 输 
入 文本 。 当 文本 容器 不 能 将 文本 显示 完整 时 ， 容 器 右 下 角 有 个 溢出 图 标 田 。 此 时 ， 使 用 鼠标 再 
绘制 一 个 用 于 串 接 文本 的 文本 容器 ， 或 使 用 鼠标 单 击 溢出 图 标 田 ， 当 鼠标 光标 变 成 9 形状 时 ， 
将 光标 移动 到 下 方 的 空白 文本 容器 的 位 置 单 击 ， 溢 出 的 文本 会 自动 流入 容 器 中 ， 如 下 图 所 示 。 


未 回 Fa 
多 重负 可。 


5 惊喜 不 面 
揭 禹 圣诞 去 人 


神 税 的 刍 邯 
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‖ 经 验 一 筹 能 一 一 取消 两 个 文本 容器 之 间 的 串 接 


若是 发 现 文本 容器 串 接 错误 ， 用 户 可 取消 两 个 文本 容器 之 间 的 链接 ， 其 方法 有 两 种 。 
个 双击 端口 : 将 鼠标 光标 定位 到 第 一 个 文本 容器 中 ， 然 后 双击 要 取消 链接 的 进 端口 或 出 端口 
图 标 田 ， 文 本 将 流 回 到 第 一 个 容器 。 
个 删除 容器 : 删除 其 中 一 个 链接 的 文本 容器 ， 文 本 将 自动 流入 到 未 被 删除 的 容器 中 。 


2. 设置 滚动 文本 

在 Flash 中 若 需要 显示 大 量 文字 ， 除 可 使 用 串 接 文本 的 方式 在 多 个 文本 容器 中 显示 所 有 文 
本 外 ， 还 可 通过 设置 滚动 文本 的 方式 来 解决 该 问题 。 滚 动 文本 经 常 可 以 在 网 页 Flash 特效 中 使 
到 。 其 设置 方法 是 : 选择 “文本 工具 ” 国 ， 打 开 “ 属 性 ” 面板， 设置 “文本 引擎 、 文 本 类 型 ” 
为 “传统 文本 、 动 态 文本 ”。 将 鼠标 光标 移动 到 场景 上 按 住 左 键 拖 动 创建 文本 容器 ， 在 文本 容 
器 中 输入 文本 。 按 Shift 键 的 同时 ， 双 击 文本 容器 右 下 角 的 白色 空心 正方 形 ， 使 白色 空心 正方 
形变 成 黑色 空心 正方 形 。 将 鼠标 移动 到 实心 圆 点 上 ， 拖 动 鼠标 调整 文本 容器 大 小 ， 使 文本 变 为 
可 滚动 模式 ， 如 下 图 所 示 。 使 用 滚动 文本 浏览 时 ， 单 击 文本 块 ， 再 使 用 鼠标 滚动 即 可 浏览 所 有 
的 文本 。 


1 经 验 一 筹 能 一 一 解决 滚动 文本 显示 不 正常 的 方法 
在 制作 滚动 文本 后 ， 预 览 时 可 能 会 发 现 文本 只 会 显示 第 一 行 ， 而 无 法 查看 一 行 以 外 的 文本 。 造 


成 这 种 情况 的 原因 是 ， 在 “属性 ”面板 “段落 ”选项 下 将 “行为 ”下 拉 列 表 框 设置 为 了 “单行 ” 
选项 。 用 户 只 需要 将 “单行 ”选项 修改 为 “多 行 ” 即 可 解决 问题 。 


3. 设置 输入 文本 

制作 网 页 时 ， 可 能 会 制作 登录 界面 、 留 言 簿 之 类 需要 输入 文本 的 界面 。 此 时 ， 用 户 可 通过 
设置 输入 文本 来 解决 。 输 入 文本 是 一 种 交互 式 的 文本 格式 ， 用 户 可 在 其 中 输入 文本 ， 然 后 根据 
事先 编辑 的 代码 ， 将 用 户 输 入 的 文本 返回 目标 地 址 中 完成 一 些 操作 。 

本 例 将 打开 “登录 界面 Ha” 动画 ， 在 其 中 绘制 文本 框 制作 一 个 登录 界面 ， 使 用 户 在 浏览 
时 可 以 输入 账户 和 密码 ， 其 具体 操作 如 下 : 
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MSIERIOTEE 绘制 文本 杠 

1. 打开 “登录 界面 .fa” 动画 文档 ， 选 择 “ 文 本 

工具 " 国 。 在 “属性 ”面板 中 设置 “文本 引擎 、 
文本 类 型 ”为 “传统 文本 、 输 入 文本 ”。 

2.， 设置 “系列 、 样 式 、 大 小 、 颜 色 " 为 “微软 雅 黑 、 
Regular、19.0、 白 色 (#FFFFFF ) ”。 

3.， 拖 动 鼠 标 在 “登录 账号 ”文本 框 中 绘制 一 个 
文本 框 。 


STERI02> ”测试 动画 
1.， 拖 动 鼠 标 ， 在 下 方 的 密码 文本 框 中 绘制 一 个 


文本 框 。 

2， 按 Ctrl+Enter 组 合 键 ， 测 试 动画 。 在 打开 的 “@ 
Flash Player 播放 器 中 , 单 击 "用户 名 " 和 “ 密 ^ 

码 ”文本 框 ， 可 在 其 中 输入 用 户 名 和 密码 。 


EY "信阳 Se i . L 
| 双生 ”在 Flash 中 输入 的 文本 不 能 为 汉字 ， 
,可 以 是 数字 、 字 母 和 下 划 线 等 


4. 设置 URL 链接 ， 

在 制作 网 站 时 ， 用 户 不 但 能 使 用 Dreamweaver 制作 文字 的 超级 链接 ， 在 一 些 Flash 网 站 或 “@ 
广告 中 常常 还 会 通过 为 文字 设置 URL 链接 的 方法 来 连接 其 他 页 面 。 为 文本 设置 URL 链接 的 方 

法 是 : 选择 “文本 工具 ” 国 ， 输 入 需要 建立 URL 链接 的 文本 。 在 “属性 ”面板 中 ， 展 开 “ 选 

项 ”选项 ， 在 “链接 ”文本 框 中 输入 需要 链接 的 URL 地 址 ， 在 “目标 ”下 拉 列 表 框 中 选择 ” 

blank"” 选项 。 此 时 ,文本 下 方 将 出 现代 表 超 级 链接 文本 的 下 划 线 ， 如 下 图 所 示 。 在 测试 动画 时 ， 

单 击 设置 了 URL 链接 的 文本 将 打开 指定 的 网 页 。 全 
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ee -他 人 
ES , 


5.3.3 ”分 离 文 字 
在 Flash 中 用 户 若 想 对 输入 的 文字 进行 


eo 更 进一步 的 编辑 ， 如 变形 、 担 曲 等 操作， 就 即将 新 鲜 上 市 


需要 分 离 文字 。 分 离 后 的 文字 将 不 再 是 以 文 
Ma ”本 的 形式 存在 ， 而 是 变 为 了 矢量 图 的 格式 ， 
”如 右 图 所 示 。 分 离 文字 的 方法 是 : 选择 需要 
分 离 的 文字 ， 选 择 【 修改 】/【 分 离 】 命令 或 分 高 前 分 离 后 


按 Ctrl+B 组 合 键 ， 完 成 文字 分 离 。 
即将 新 鲜 上 市 | 


需要 注意 的 是 ， 如 果 用 户 不 是 对 单个 文 
本 进行 分 离 ， 就 需要 执行 两 次 分 离 操作 才能 
将 文本 完全 分 离 。 


国 目 JE 眼镜 宣传 动画 


QB 巩固 使 用 文本 工具 输入 文字 的 方法 。 


1 进一步 掌握 编辑 文本 的 方法 。 串 


本 例 将 打开 “眼镜 宣传 动画 Ha” 动画 文 档 ， 首 先 在 其 中 使 用 文本 工具 国 输入 文字 ， 再 分 
离 文字 并 编辑 文字 效果 ， 最 后 为 文字 添加 URL 地 址 ， 其 最 终 效果 如 下 图 所 示 。 
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STERP 01:> 打开 动画 文档 

1. 打开 “眼镜 宣传 动画 fla" 动画 文档 。 选择 “ 文 
本 工具 ” 国 。 在 “属性 ”面板 中 ， 设 置 “ 文 
本 引擎 、 文 本 类 型 ”为 “TLF 文本 、 只 读 ”。 

2.， 设置 “系列 、 样 式 、 大 小 、 颜 色 ” 为 “ 汉 仪 
综艺 体 简 、 Regular.94.0、 灰 色 ( #666666 )”。 

3. 使 用 鼠标 在 场景 中 单 击 并 输入 "狂欢 季 " 文本 。 


WER02 有 最。 移动 、 复 制 文本 

选中 输入 的 文本 , 按 两 次 Ctri+B 组合 键 , 分离 分 本 。 
按 Ctn+C 组 合 键 复制 文本 , 按 Ctrl+V 组 合 键 粘贴 
文本 。 使 用 鼠标 选择 复制 的 文本 ， 将 其 移动 到 比 
原文 本 偏 左上 方 的 位 置 。 


站 3. 
在 进行 文字 位 置 的 微调 时 ， 用 户 | 
| | 以 使 用 键盘 上 的 方向 键 进行 调整。 


五 本 面 
且 回 哆 。 口 线 和 Ros 


‘STEP 03: 


STEP 04:- 


填充 颜色 


. 选择 [ 窗口 ]/[ 颜色 ] 命 令 , 打开 “颜色 " 面板 。 
设置 “颜色 类 型 ”为 “ 径 向 渐变 ”。 在 “ 流 ” 
栏 中 单 击 “ 反 射 颜色 ”按钮 回 。 

- 设置 渐变 颜色 为 “#EC8015" 和 "#FFDOB1" 。 


填充 文本 边缘 


.选择 “墨水 瓶 工 具 ” 效 ， 在 “属性 ”面板 中 
单 击 “ 填 充 颜 色 ” 色 块 ， 在 弹出 的 选 色 器 中 
选择 “白色 (#FFFFF ) ”。 
设置 “Alpha” 为 “40” ， 
"2.00” 。 


再 设置 “笔触 ”为 


42 
“ 
人 


32 
wen 
人 


Hour: 
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二 TEBI05 村 。 设置 文本 属性 


1.， 选择 "文本 工具 " 国 , 在 “属性 " 面板 中 设置 " 改 时 | 
变 文字 方向 ”为 “垂直 ”。 网站 ce 导电 


2.， 再 设置 “系列 、 大 小 ”为 “ 汉 仪 圆 释 体 简 、 
70.0" 。 


个 限 
[ 在 排列 文本 时 ， 横 排 文字 和 坚 排 文 ] 
， 字 混合 拱 配 可 以 让 图 像 整体 版 式 更 加 半 现 ， 由 


RER06 且 变形 文字 

1.， 在 “工具 ”面板 中 选择 “任意 变形 工具 ” 珊 。 

2. 将 鼠标 光标 移动 到 文字 下 方 中 间 的 黑心 圆 点 
上 ， 当 鼠标 光标 变 为 一 形状 时 ， 按 住 鼠标 向 
左边 拖 动 使 文字 倾斜 。 


贡 a 从 
| 有 二 全 用 “ 任 才 交 形 ” 工 具 桓 ， 变形 文 | 
_ 字 时 不 需要 将 文字 分 。 | 


7 为 文字 填充 颜色 

1 按 两 次 Ctl+B 组 合 键 , 分离 文字 。 在 “颜色 ” 
面板 中 设置 “颜色 类 型 ”为 “线性 渐变 ”。 

2.， 设置 颜色 为 “证 FDE58” 和 “#FFF3B6”。 


| 区 3 “颜色 ”下 拉 列表 框 中 ， 选 | 
| 择 “ 位 图 填充 ”选项 ， 还 可 为 分 离 的 文本 填充 | 
| 位 图 效果 。 | 


TEPI08 于 ”输入 文本 

1.， 选择 "文本 工具 " 国 , 在 "属性" 面板 中 设置 “ 改 
变 文字 方向 ”为 “水 平 ”。 输 入 文本 并 选中 
输入 的 文本 , 设置 “系列 、 颜色 、 大 小 " 为 “ 汉 
仪 葵 心 体 简 、 茶 色 (#996600 ) 、24.0”。 

2.， 使 用 相同 的 方法 输入 文本 并 选中 输入 的 文本 ， 
设置 “系列 、 颜 色 、 大 小 ”为 “微软 雅 黑 、 
茶色 (#996600 ) 、13.0”。 
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AGE 二 设置 段落 样式 

1， 输入 文本 并 选中 输入 的 文本 ， 在 “字符 ” 栏 
中 设置 “系列 、 颜 色 、 大 小 ”为 “微软 雅 黑 、 
白色 (#FFFFF ) 、10.0”。 

2， 在 “段落 " 栏 中 单 击 “ 居 中 对 齐 ”按钮 


LY Ee 
| 9 在 “段落 ” 栏 中 还 可 设置 文本 的 “ 缩 ] 
| 进 ”、 “间距 ”等 参数 。 


5.4 ”编辑 对 象 


在 Flash 中 绘制 图 形 、 将 文本 分 离 后 ， 可 以 根据 实际 需要 对 对 象 进行 编辑 。 通 过 Flash 


带 的 工具 或 命令 ， 都 可 以 对 绘制 的 图 像 、 分 离 后 的 文本 进行 编辑 。 下 面 将 讲解 在 Flash 中 编辑 
对 象 的 方法 。 


IEEEIH》------ 


Q 快速 掌握 图 形 的 基本 编辑 操作 。 人 灵活 使 用 图 形 的 整合 方法 编辑 图 形 。 


1 S 进 一 步 学 握 图 形 的 高 级 编辑 操作 。 | | 


5.4.1 选择 对 象 


要 想 对 动画 文档 中 的 图 形 进 行 编辑 ， 首 先 要 对 其 进行 选择 。Flash 提供 了 多 种 选择 工具 ， 
让 用 户 能 根据 实际 情况 进行 选取 操作 。 下 面 将 讲解 各 选取 工具 的 使 用 方法 。 
1. 选择 工具 
在 Flash 中 要 对 对 象 进行 选择 和 移动 都 需要 使 用 “选择 工具 ” 辆 ， 除 进行 选择 和 移动 前 需 
要 选择 对 象 外 ， 在 执行 删除 、 变 形 等 操作 前 都 需要 选择 工具 。 选 择 工 具 的 具体 操作 如 下 。 
如 选择 : 使 用 “选择 工具 ” 园 选 择 填 充 色 块 或 路 径 , 可 以 对 选择 的 对 象 进行 删 除 、 移 动 等 操作 。 
选择 对 象 ， 然 后 按 Delete 键 可 删除 对 象 。 选 择 对 象 ， 再 将 鼠标 光标 移动 到 对 象 上 按 住 左 
键 进行 拖 动 可 移动 对 象 。 
介 拖 动 : 使 用 “选择 工具 ” 辆 拖 动 填充 色 块 或 路 径 ， 可 以 使 图 形 或 线条 变形 。 不 选择 对 象 ， 
直接 将 鼠标 光标 移动 到 矢量 色 块 边沿 或 矢量 线 上 ， 当 和 饼 标 光标 变 成 形状 时 按 住 左 键 进行 
拖 动 ， 可 以 使 其 变形 。 


LE 
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2. 部 分 选取 工具 
“部 分 选取 工具 ” 国 可 通过 调整 路 径 上 
的 锚 点 和 线条 ， 调 整 对 象形 状 。 使 用 部 分 选 
取 工 具 国 对 对 象 调 整形 状 的 方法 是 : 选择 “部 > < < 


分 选取 工具 ” 国 ， 在 填充 色 块 边沿 或 路 径 上 
单 击 ， 按 住 左 键 拖 动 锚 点 ， 可 让 图 形变 形 。 


3. 套 索 工具 


“ 套 索 工具 ” 园 可 以 绘制 出 自由 的 选择 区 域 ， 常 用 于 选择 不 规则 的 图 形 。 使 用 套 索 工具 
鳃 的 方法 是 : 选择 “ 套 索 工具 ” 贺 ， 在 场景 中 单 击 并 拖 动 鼠标 绘制 选择 区 域 ， 绘 制 完 成 后 释 
放 鼠 标 ， 区 域 中 的 图 形 将 被 选中 ， 如 下 图 所 示 。 


5.4.2 ”变形 对 象 


当 绘制 的 对 象形 状 不 能 满足 实际 需要 ， 除 了 重新 绘制 对 象 外 ， 用 户 还 可 使 用 “任意 变 
形 工具 ” 野 对 选中 的 图 形 进 行 旋转 、 倾 斜 、 缩 放 、 扭 曲 和 封套 等 操作 。 在 “工具 ”面板 中 选 
择 “ 任 意 变 形 工具 ” 鸯 并 需要 选择 变形 图 形 ， 即 可 进行 编辑 。 任 意 变 形 工具 变形 对 象 的 方法 
如 下 。 

如 旋转 与 倾斜 : 使 用 “任意 变形 工具 ” 辆 选 ” 名 缩放 : 将 和 饼 标 光标 移动 到 四 个 角 的 控制 点 

择 图 形 ， 将 筷 标 光标 移动 到 四 个 角 的 控制 点 上 ， 当 和 鼠标 光标 变 成 Ww 形状 时 拖 动 ， 将 等 比 

上 ， 光 标 变 成 形状 ， 按 住 左 键 拖 动 可 旋转 例 缩放 图 形 。 将 鼠标 移动 到 四 边 的 控制 点 上 ， 

图 形 。 将 鼠标 移动 到 四 边 的 控制 点 上 ， 光 标 。 光标 变 成 ~ 或 1 形状 时 ， 按 住 左 键 拖 动 可 水 平 

变 成 二 形状， 按 住 左 键 拖 动 可 倾斜 图 形 。 按 ”或 重 直 缩放 图 形 。 按 住 Shift 键 拖 动 ， 可 以 任 

住 Alt 键 拖 动 ， 可 以 角 点 为 中 心 旋转 。 意 缩放 ; 按 住 Alt 键 拖 动 ， 可 以 中 心 点 为 中 
心 进行 缩放 。 
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全 扭曲 : 在 “工具 ”面板 选项 区 域 中 , 单 击 “ 担 ”各 封套 : 在 “工具 ”面板 选项 区 域 中 , 单 击 “ 封 
曲 ”按钮 国 ， 将 鼠标 光标 移动 到 四 个 角 的 控 套 ” 按 钮 畏 ， 将 鼠标 光标 移动 到 方形 或 圆 形 
制 点 上 ， 当 和 鼠标 光标 变 成 形状 时 ， 按 住 左 键 。 控制 点 上 ， 光 标 变 成 形状 ， 按 住 左 键 拖 动 可 
拖 动 可 扭曲 图 形 。 将 光标 移动 到 四 边 的 控制 。” 捏 曲 图 形 。 

点 上 拖 动 可 倾斜 图 形 。 


5.4.3 图形 的 组 合 

当场 景 中 的 对 象 过 多 时 ， 用 户 可 对 已 绘制 的 图 形 对 象 进行 组 合 ， 以 方便 之 后 的 编辑 。 组 合 
对 象 的 方法 是 : 选择 需要 组 合 的 对 象 ， 再 选择 【 修改 】/【 组 合 】 命 令 ， 或 按 Ctrl+G 组 合 键 组 
合 对 象 ， 如 下 图 所 示 。 

此 外 ， 在 发 现 组 合 的 对 象 不 对 或 需要 对 组 合 的 对 象 单 独 进行 编辑 时 ， 可 对 其 取消 组 合 。 
方法 是 : 选择 已 经 组 合 的 对 象 后 , 再 选择 【 修改 】/[ 取消 组 合 ] 命 令 , 或 按 Shiftt+Ctrl+G 组 合 键 。 


上 经 验 一 筹 信 一 一 分 高 图 形 


在 Flash 中 除 文本 可 以 分 离 外 ， 对 象 也 可 以 进行 分 离 。 其 分 离 方 法 和 分 离 文 本 一 样 ， 都 是 选择 
需要 分 离 的 图 形 ， 再 选择 【修改 〗/【 分 离 〗 命令 ， 或 按 Ctrl+B 组 合 键 分 离 对 象 。 需 要 注意 的 是 ， 
被 分 离 的 对 象 虽然 其 效果 看 似 和 取消 组 合 一 样 ， 但 执行 分 离 命令 后 对 象 的 线条 属性 会 有 一 定 的 
改变 。 


5.4.4 图像 的 基本 操作 

Flash 的 图 形 、 图 像 编辑 功能 强大 ， 在 其 中 用 户 可 以 进行 很 多 不 同 的 操作 ， 实 现 许多 特定 
的 效果 。 但 在 学 习 一 些 高 级 的 操作 前 ， 还 需要 掌握 最 常用 的 操作 ， 以 为 方便 后 面 的 图 像 制作 。 
下 面 将 讲解 图 形 、 图 像 的 一 些 常用 的 基本 操作 。 


二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


1. 移动 图 像 
在 Flash 中 编辑 动画 ， 最 常 使 用 到 的 操作 是 移动 图 形 或 图 像 。 移 动 图 形 或 图 像 的 方法 简单 
户 只 需 选择 “移动 工具 ” 半 ， 再 使 用 鼠标 拖 动 图 形 或 图 像 即 可 进行 移动 。 

2. 复制 图 像 

制作 复合 图 形 或 图 像 时 ， 它 们 可 能 是 由 一 些 重复 的 图 形 和 图 像 组 成 的 。 此 时 ， 用 户 若是 
自行 绘制 相同 的 图 形 、 图 像 ， 会 花费 很 多 时 间 。 为 了 避免 麻烦 ， 用 户 可 复制 图 形 或 图 像 。 其 方 


法 是 : 选择 需要 复制 的 图 形 、 图 像 ， 按 Ctrl+C 组 合 键 或 选择 [编辑 ] 【复制 ] 命令 进行 复制 ， 
按 Ctrl+V 组 合 键 或 选择 【 编辑 ] /【 粘贴 】 命令 进行 粘贴 即 可 。 


3. 设置 图 像 不 透明 度 
为 使 制作 的 动画 界面 更 加 透彻 ， 用 户 可 为 绘制 的 图 形 或 导入 的 图 像 设置 不 透明 度 。 为 绘制 
的 图 形 设置 不 透明 度 的 方法 是 : 选择 需要 设 
置 不 透明 度 的 图 形 , 在 “属性 " 面板 或 “颜色 ” 
面板 中 设置 填充 颜色 和 笔触 颜色 的 不 透明 度 。 
而 在 设置 图 像 不 透明 度 时 ， 需 选择 设置 不 透 
明度 的 图 像 ， 并 将 该 图 像 转换 为 影片 剪辑 元 
件 ( 将 图 像 转换 为 影片 剪辑 元 件 的 方法 将 在 
第 6 章 的 6.2.2 节 中 讲解 ) 。 在 “属性 ”面板 
的 “色彩 效果 ” 栏 中 设置 “样式 " 为 “Alpha" ， 
再 在 出 现 的 “Alpha” 滑 块 上 拖 动 鼠标 ， 调 整 
图 像 的 不 透明 度 即 可 ， 如 右 图 所 示 。 


AI 
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5.4.5 图像 的 高 级 操作 

复杂 图 形 可 以 通过 高 级 图 形 编辑 来 完成 。 在 Flash 中 使 用 命令 和 一 些 高 级 功能 ， 可 以 对 图 
形 或 图 形 对 象 进行 复杂 的 编辑 ， 最 终 绘制 出 更 加 精致 的 图 形 。 

1. 合并 对 象 

合并 对 象 是 通过 命令 将 多 个 图 形 对 象 进行 合并 ， 以 得 到 更 加 复杂 的 图 形 对象 。 合 并 对 象 的 
方法 是 : 选择 【修改 】/【 合并 对 象 】 命令 ， 然 后 在 其 子 菜单 中 选择 相应 的 合并 命令 ， 即 可 对 
选择 的 图 形 对 象 进行 合并 操作 。 合 并 对 象 子 菜单 中 各 命令 作用 如 下 。 


绘制 与 编辑 Flash 图 形 


人 “联合 ”命令 : 选择 该 命令 ， 可 以 将 两 个 ”内 “交集 ”命令 : 选择 该 命令 ， 将 只 保留 两 
或 多 个 图 形 对 象 合并 成 为 单个 图 形 对 象 。 个 或 多 个 图 形 对 象 相交 的 部 分 ， 并 将 其 合并 
为 单个 图 形 对 象 。 


J I 


人 和“ 打 孔 ”命令 : 选择 该 命令 ， 将 使 位 于 上 到 “ 裁 切 ” 命 令 : 选择 该 命令 ， 将 保留 上 下 
方 的 图 形 对 象 删除 下 方 的 图 形 对 象 ， 并 合并 两 个 图 形 对 象 中 的 重 登 部 分 ， 并 应 用 上 方 图 72 口 
成 为 单个 图 形 对 象 。 形 的 属性 ， 将 其 合并 成 为 单个 图 形 对 象 。 


5 
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2. 设置 图 像 混合 模式 

为 了 使 用 图 像 出 现 特殊 的 颜色 效果 ， 用 
户 可 为 图 像 设 置 混合 模式 。 设 置 图 像 混 合 模 
式 后 ， 往 往 可 以 得 到 良好 的 视觉 冲击 力 ， 所 
以 当 制 作 需要 视觉 冲击 力 的 动画 部 分 时 ， 动 
画 制 作者 喜欢 为 图 像 设 置 混合 模式 。 为 图 像 
设置 混合 模式 的 方法 是 : 选择 需要 设置 混合 
模式 的 图 像 ， 并 将 其 转换 为 影片 剪辑 元 件 ， 
在 “属性 ”面板 中 的 “显示 ” 栏 中 设置 “混合 ” 
选项 即 可 ， 如 右 图 所 示 。 


人 全 、 sm: 日 人 总 


上 经 验 一 敌 能 一 一 为 文字 设置 


在 Flash 中 用 户 可 以 直接 为 文字 设置 混合 模式 ， 其 设置 方法 是 : 选择 需要 设置 混合 模式 的 文字 ， 
在 “属性 ”面板 中 的 “显示 ” 栏 中 设置 “混合 ”选项 即 可 。 


Hours 
一 一 一 一 


证 滞 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


3. 为 图 像 添加 滤 镜 
在 制作 运动 效果 、 发 光 效 果 等 特殊 效果 时 ， 都 可 直接 使 用 Flash 自 带 的 滤 镜 功能 为 图 像 添 
加 滤 镜 ，Flash 中 的 滤 镜 效果 虽然 不 多 但 都 很 


实用 。 为 图 像 添加 滤 镜 的 方法 是 : 选择 需要 a 
添加 滤 镜 效果 的 图 像 ， 并 将 其 转换 为 影片 剪 人 | 


辑 元 件 ， 在 “属性 ”面板 中 的 “ 滤 镜 ” 栏 下 
方 单 击 辐 按钮 ， 在 弹出 的 下 拉 列 表 框 中 选择 
需要 的 滤 镜 选项 。 此 时 “属性 ” 栏 中 将 出 现 
对 应 滤 镜 的 设置 选项 ， 在 其 中 可 对 滤 镜 效果 
进行 设置 ， 如 右 图 所 示 。 


虱 目 国友 人 OO 制作 产品 宣传 动画 界面 


G 巩固 图 像 的 基础 操作 方法 。 
& 进一步 学 握 使 用 图 像 的 高 级 操作 编辑 动画 的 方法 。 


本 例 将 打开 “产品 宣传 动画 界面 .ha” 动画 文档 , 在 其 中 绘制 图 形 并 进行 编辑 ,然后 输入 文 
字 ， 最 后 为 图 像 设 置 滤 镜 效果 ， 其 最 终 效果 如 下 图 所 示 。 


AGE 情人 绘制 形状 

1. 打开 “产品 宣传 动画 界面 fa” 动画 文档 ， 
选择 “椭圆 工具 ”加 .选择 【 窗口 ]/【 属性 】 
命令 ， 打 开 “ 属 性 ”面板 。 在 其 中 设置 “ 填 
充 颜 色 " 为 “#FFFFCC”,“Alpha" 为 “50%"。 

2， 设置 “内 径 ” 为 “60.00”。 

3. 拖 动 鼠 标 在 场景 左上 方 绘制 一 个 同心 圆 。 


i 移动 图 像 


使 用 “移动 工具 ” 国 将 黑色 的 女 包 移动 到 
之 前 绘制 的 同心 圆 上 。 

2.， 使 用 相同 的 方法 在 场景 左下 方 绘制 一 
心 ee 


选择 “文本 工具 " 国 , 在 "属性 " 面板 中 设置 “系列 ” 
为 “微软 雅 黑 ”。 再 分 别 设置 不 同 的 大 小 、 颜 色 ， 
在 场景 右边 输入 文本 。 


Ds 色 时 ， 最 好 选 | | 
， 择 一 些 鲜 格 的 颜色 ， 以 增加 文档 的 丰富 性 ， | 


本 本 5 六 文本 设置 委 加 效果 
1. 使 用 “移动 工具 ” 国 选 中 所 有 的 文本 。 
2. 和 属性” 面板 中 ， 展开 “显示 " 栏 , 设置 “ 混 


”模式 为 “又 加 ” 。 


在 选择 所 有 文本 时 ， 用 用 户 可 通过 拖 
民选 的 方式 快速 选中 所 有 的 文本 | 
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二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


机 博大 

1 使 用 “外形 工 具 ” 加 在 场景 左边 统制 一 个 “ 友 
色 (#999999 ) ”、 不 透明 度 为 “80%” 的 
长 方形 。 再 使 用 "矩形 工具 ” 辐 绘 制 一 个 “ 白 
色 ( 厅 FFFFF ) "的 矩形 。 选 择 绘制 的 白色 
矩形 ， 再 选择 “任意 变形 工具 ” 吴 。 使 用 鼠 
标 向 右 拖 动 矩形 上 方 中 间 的 黑色 控制 点 ， 倾 
人 和 形 。 

2， 使 用 “线条 工具 " 同 在 绘制 的 矩形 下 方 绘制 一 
条 “笔触 ”为 “3.00" 的 白色 直线 。 


二 本本: 编辑 文本 


1， 选 择 “" 文 本 工具 ” 国 ， 在 “属性 ”面板 中 设 
置 “ 系 列 、 大 小 、 行 距 ” 为 “ 汉 仪 狂 节 体 简 、 
18.0、97" 。 

2， 分 别 将 文本 颜色 设置 为 “白色 (#FFFFFF )”、 

' 深 红 (#990000 ) ”， 使 用 “文本 工具 " 轩 
在 场景 中 输入 文本 。 


Lan < 限时 优惠 ”文本 后 ， 需 将 | 


下 


为 图 形 添加 滤 镜 


白色 女 包 图 像 , 在 “属性 " 面板 中 ， 
“ 滤 镜 ” 栏 ， 单 击 一 按钮 ， 在 弹出 的 下 拉 
a “投影 ”选项 。 
2.， 在 "属性 ” 栏 中 设置 “模糊 X”、“ 模 糊 Y” 
为 “20 像素 ”、“20 像素 ”。 设 置 “ 角 度 ” 
为 “55?” 


WE 为 文本 添加 滤 镜 


dedi 。 在 “属性 ”面板 中 展 
" 滤 镜 ” 栏 ， 单 击 可 接 包 ， 在 弹出 的 下 拉 列 
ee “发 光 ” 选 项 。 
2.， 在 “属性 ” 栏 中 设置 “模糊 X、 模 糊 Y” 均 为 
“16 像素 ”。 
3.， 设置 “颜色 ”为 “白色 (#FFFFFF)”。 


:| 


可 有 列 


绘制 与 编辑 Flash 


NT 调整 图 像 上 色 


1.， 选 择 白色 女 包 , 在 “属性 ”面板 中 单 击 “ 滤 镜 ” 
栏 下 的 回 按 钮 ,在 弹出 的 下 拉 列 表 框 中 选择 " 调 
整 颜色 ”选项 。 

2. 在 “属性 ” 栏 中 设置 “亮度 、 饱 和 度 、 色 相 ” 
为 “22、6、-9"”。 


团 


te 


由 于 白色 女 包 颜色 偏 黑 ， 所 以 需要 


到 国 口 口 口 @ 放 
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1 经 验 一 筹 管 一 一 删除 渡 镜 


当 用 户 觉得 已 使 用 的 滤 镜 效果 不 佳 时 ， 可 将 已 经 使 用 的 
滤 镜 删除 。 删 除 滤 镜 的 方法 是 : 在 “属性 ” 栏 中 选择 
需要 删除 的 滤 镜 名 称 ， 再 单 击 顺 按钮 即 可 删除 选择 的 


5.5 练习 1 小 时 


本 章 主要 介绍 了 Flash 的 基础 操作 、 绘 制图 形 、 编 辑 图 形 以 及 输入 并 编辑 文字 的 方法 ， 
户 要 想 在 日 常 工作 中 熟练 使 用 它们 ， 还 需 再 进行 巩固 练习 ， 下 面 以 新 建 “Logo”Flash 文档 和 
绘制 Flash 广告 对 象 为 例 ， 进 一 步 巩固 这 些 知识 的 使 用 方法 。 


(人 ”新 建 “Logo”Flash 文档 


本 例 将 首先 新 建 Flash 文档 以 及 修改 
文档 的 属性 ， 然 后 根据 开发 网 络 动画 的 需 
要 ， 制 定好 工作 界面 ， 最 后 进行 保存 。 通 
过 本 练习 巩固 Flash 文档 的 新 建 、 保 存 以 
及 自 定义 Flash CS6 的 工作 界面 的 操作 方 
法 。 最 终 效 果 如 右 图 所 示 。 


有 混和 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 
(2 制作 Flash 广告 对 象 


本 例 将 打开 “制作 Flash 广告 对 
象 fila” 动画 文 档 ， 在 其 中 编辑 图 像 ， 
为 它们 添加 发 光 和 阴影 效果 。 然 后 
输入 文本 ， 为 文本 添加 发 光 效 果 。 


最 终 效果 如 右 图 所 示 。 
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快速 管理 Flash 中 的 素材 


@ 认识 时 间 轴 与 图 层 
@ 素材 、 元 件 与 库 的 使 用 


学 习 2 4 时 ; 


ETITTETITTTTTTTT TT TT TT 


要 


在 Flash 中 制作 出 动感 十 足 、 效 果 绚丽 的 ; 


动画 , 需要 认识 并 掌握 时 间 轴 与 图 层 的 使 用 方法 。 。 


在 “时 
进程 ; 
实例 对 
资源 ， 


以 提高 资源 的 利用 率 ， 方 便 动 画 的 制作 。 


间 轴 ”中 可 以 创建 动画 和 控制 动画 的 播放 : 
而 图 层 则 是 “时 间 轴 ”的 一 部 分 ， 可 以 对 
象 和 动画 进行 管理 。 为 了 更 好 地 利用 已 有 : 


户 还 可 以 将 需要 的 素材 添加 到 “ 库 ” 中， 


上 机 了 小 时 


二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


6.1 认识 时 间 轴 与 图 层 

“时 间 轴 ”主要 由 图 层 区 和 帧 控制 区 组 成 ， 用 于 创建 动画 和 控制 动画 的 播放 进程 。 图 层 是 
“时 间 轴 " 的 一 部 分 , 主要 用 于 管理 实例 对 象 和 动画 制作 , 通过 图 层 的 使 用 可 以 让 动画 有 条 理 。 
下 面 将 分 别 对 它们 进行 讲解 。 


DIES ------ 


快速 认识 “时 间 轴 ”面板 和 Flash 的 图 层 。 熟练 掌握 Flash 图 层 的 基本 操作 。 


1 熟练 掌握 “时 间 轴 ”的 基本 操作 。 用 | 


6.1.1 认识 “时 间 轴 ”面板 

“时 间 轴 ”面板 由 图 层 区 和 帧 控制 区 组 成 ， 主 要 用 于 创建 动画 和 控制 动画 的 播放 进程 。 左 
例 为 图 层 区 ， 该 区 域 用 于 控制 和 管理 动画 中 的 图 层 ， 右 侧 为 帧 控制 区 ， 由 播放 指针 、 帧 、 时 间 
轴 标尺 以 及 时 间 轴 视图 等 部 分 组 成 。 选 择 [ 窗口 ]/[ 时 间 轴 命令, 打开 如 下 图 所 示 的 “时 间 轴 ” 
面板 。 


网 | 


为 所 有 文档 显示 轮廓 帧 关键 帧 “播放 头 空白 关键 由 


锁定 所 有 图 层 
显示 和 隐藏 所 有 图 层 


“时 间 轴 ”面板 菜单 
帧 标题 


新 建 图 层 EU EDETEED ey -FE = 运行 时 间 


新 建文 件 夹 删除 图 层 。 播放 控制 绘图 纸 外 观 轮廓 帧 速率 


“时 间 轴 ”面板 中 各 部 分 作用 如 下 。 

个 帧 : 是 组 成 Flash 最 基础 的 部 分 ， 在 播放 时 Flash 是 以 帧 的 排列 从 左 向 右 一 次 快速 切换 。 
每 个 帧 都 是 存放 于 图 层 上 的 。 

从 空白 关键 帧 : 为 了 在 帧 中 创建 图 形 必 须 新 建 空白 关键 帧 , 它 在 时 间 轴 上 呈现 空心 圆 点 显示 。 

所 关键 帧 : 在 空白 关键 帧 中 添加 元 素 后 ， 空 白 关 键 帧 将 被 转换 为 关键 帧 。 此 时 ， 空 心 圆 点 将 
被 转换 为 实心 原点 。 

从 帧 标题 : 位 于 时 间 轴 顶部 ， 用 于 提示 帧 编号 ， 帮 助 用 户 快速 定位 帧 位 置 。 

人 如 播放 头 : 用 于 控制 当前 的 播放 位 置 ， 用 户 可 以 随意 地 对 其 进行 单 击 或 拖 动 操作 。 

介 图 层 : 用 于 存放 舞台 中 的 元 素 ， 可 一 个 图 层 放置 一 个 元 件 ， 也 可 一 个 图 层 放置 多 个 元 件 。 

如 当前 图 层 : 当前 正在 编辑 的 图 层 。 

人 显示 和 隐藏 所 有 图 层 : 单 击 图 层 列表 左上 方 的 “显示 和 隐藏 所 有 图 层 ” 按 钮 加， 所 有 图 层 
都 将 被 隐藏 。 再 次 单 击 该 按钮 将 会 显示 所 有 的 图 层 。 
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全 锁定 所 有 图 层 : 单 击 图 层 列表 左上 方 的 “锁定 所 有 图 层 ”按钮 国 ， 所 有 图 层 都 将 不 能 被 操 
作 。 再 次 单 击 该 按钮 将 解锁 所 有 图 层 。 

如 为 所 有 文档 显示 轮廓 : 在 每 个 图 层 名 称 的 最 右边 都 有 各 个 颜色 块 ， 它 是 该 图 层 元 素 的 轮廓 
色 。 单 击 图 层 列表 左上 方 的 “为 所 有 文档 显示 轮 廊 ”按钮 回 ， 所 有 图 层 中 的 元 素 都 会 显示 
轮 廊 色 。 再 次 单 击 该 按钮 将 会 取消 显示 该 轮 廊 色 。 显 示 图 层 轮廓 色 可 以 帮助 用 户 更 好 地 识 
别 元 素 所 在 的 图 层 。 

所 新 建 图 层 : 单 击 “ 新 建 图 层 ”按钮 回 ， 可 新 建 一 个 图 层 。 

从 新 建文 件 夹 : 单 击 “ 新 建文 件 末 ”按钮 回 ， 可 新 建 一 个 文件 夹 。 将 相同 属性 或 一 个 类 别 的 
图 层 放置 在 一 个 文件 夹 中 更 加 方便 编辑 管理 。 

从 删除 图 层 : 单 击 “删除 图 层 ” 按 钮 卫 ， 可 删除 选中 的 图 层 。 

如 播放 控制 : 用 于 控制 动画 的 播放 ， 从 左 到 右 依次 为 “ 转 到 第 1 帧 ”按钮 国 、“ 后 退 一 帧 ” 
按钮 团 、 “播放 ”按钮 国 、“ 前 进 一 帧 ”按钮 和 “ 转 到 最 后 一 帧 ”按钮 末 。 

所 绘图 纸 外 观 轮廓 : 用 于 在 三 台中 同时 显示 多 帧 的 情况 ， 一 般 用 于 编辑 、 查 看 有 连续 动作 的 
动画 。 

个 帧 速率 : 用 于 设置 和 显示 当前 动画 文档 一 秒 中 播放 的 帧 数 ， 动 作 越 细腻 的 动画 需要 的 帧 速 
率 越 高 。 

个 运行 时 间 : 用 于 显示 播放 头 所 在 的 播放 时 间 ， 帧 速率 不 同 ， 相 同 帧 显示 的 运行 时 间 也 有 所 
不 同 。 

如 “时 间 轴 ”面板 菜单 : 单 击 国 按 钮 ， 在 弹出 的 下 拉 列 表 中 提供 了 关于 时 间 轴 显示 设置 的 
选项 。 


6.1.2 ”时 间 轴 的 基本 操作 

“时 间 轴 ”的 操作 主要 体现 在 操作 帧 ， 帧 是 组 成 Flash 动画 最 基本 的 单位 ， 通 过 在 不 同 的 
帧 中 放置 相应 的 动画 元 素 ( 如 图 形 、 文 字 和 元 件 等 ) ， 然 后 对 这 些 帧 进行 连续 播放 ， 最 终 实现 
Flash 动画 效果 。 在 Flash 中 ， 帧 可 以 分 为 空白 关键 帧 、 关 键 帧 和 普通 帧 3 种 。 其 中 关键 帧 是 指 
呈现 出 关键 性 动作 或 内 容 变化 的 帧 ;空白 帧 中 并 没有 内 容 ， 主 要 是 让 画面 之 间 形 成 间隔 ;而 普 
通 帧 中 的 内 容 则 和 该 帧 前 面 的 一 个 关键 帧 内 容 相 同 。 下 面 就 对 帧 的 基本 操作 进行 讲解 。 
人 四 插入 帧 : 将 鼠标 光标 定位 到 要 插入 的 帧 处 ”个 选择 帧 : 选择 帧 分 为 选择 单个 帧 、 连 续 多 
单 击 该 帧 ， 就 可 以 在 该 帧 处 插入 帧 ， 包 括 插 ”个 帧 和 间断 多 个 帧 : 单 击 帧 可 以 选择 单个 帧 ; 
入 关键 帧 、 空 白 关键 帧 和 普通 帧 3 种 。 按 F6 ” 按 住 Shift 键 分 别 单 击 连续 帧 的 首尾 可 以 选择 
键 可 插入 关键 帧 按 F7 键 可 插入 空白 关键 帧 ”连续 帧 ; 按 住 Ctrl 键 分 别 单 击 要 选择 的 帧 可 
按 F5 键 可 插入 普通 帧 。 以 选择 间断 帧 。 
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‖ 经 验 一 筹 能 一 一 选择 帧 的 方法 


在 “时 间 轴 ”面板 中 ，Flash 提供 了 多 种 选择 帧 的 方法 : 在 基于 帧 的 选择 中 ， 可 以 在 时 间 轴 中 选 
择 单个 帧 ; 在 基于 整体 范围 的 选择 中 ， 在 单 击 一 个 关键 帧 到 下 一 个 关键 帧 之 间 的 任何 帧 时 ， 整 
个 帧 序列 都 将 被 选中 ; 若 要 选择 所 有 帧 ， 可 选择 【编辑 】〗/【 时 间 轴 】/【 选 择 所 有 帧 】 命 令 ; 若 


要 选择 整个 静态 帧 范围 ， 则 双击 两 个 关键 帧 之 问 的 帧 。 


人 移动 帧 : 在 制作 动画 的 过 程 中 可 以 通过 移 
动 帧 来 调整 实例 动画 的 播放 位 置 ， 移 动 帧 的 
方法 是 : 选择 帧 后 ， 将 鼠标 光标 移动 到 选择 
的 帧 上 ， 按 住 左 键 不 放 拖 动 到 其 他 位 置 。 


如 复制 帧 : 在 制作 动画 的 过 程 中 ， 可 以 通过 
复制 帧 实现 对 动画 过 程 的 重复 使 用 。 其 方法 
是 : 选择 帧 ， 单 击 和 鼠标 右键 ， 在 弹出 的 快捷 
菜单 中 选择 “复制 帧 ”命令 ， 再 在 空白 帧 处 
单 击 息 标 右键 , 在 弹出 的 快捷 菜单 中 选择 “ 粘 
贴 帧 ”命令 。 


[ET 


从 翻转 帧 : 在 制作 动画 的 过 程 中 ， 可 以 通过 
翻转 帧 来 实现 颠倒 动画 的 播放 顺序 。 其 方法 
是 : 选择 连续 的 多 个 帧 ， 再 在 选中 的 帧 处 单 
击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 翻 
转 帧 ”命令 。 
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翻转 前 的 播放 顺序 翻转 后 的 播放 顺序 


4 删除 帧 : 删除 帧 可 将 选中 的 帧 从 时 间 轴 中 
完全 清除 ， 该 帧 的 位 置 由 后 面 的 帧 自动 前 移 
填补 。 其 方法 是 : 选择 要 删除 的 帧 ， 再 单 击 
鼠标 右键 ,在 弹出 的 快捷 菜单 中 选择 “删除 帧 ” 


1 经 验 一 筹 能 一 一 复制 由 
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和 经 验 一 敌 管 一 一 操作 由 


对 于 帧 的 复制 只 能 通过 莱 单 命令 ， 不 能 使 用 
Ctrl+C 组 合 键 和 CtrltV 组 合 键 ， 使 用 快捷 
键 将 会 对 该 帧 处 的 对 象 进行 复制 。 复 制 帧 也 
会 对 该 帧 处 的 对 象 同时 进行 复制 。 因 此 ， 这 
种 操作 方法 可 以 简化 制作 动画 的 操作 步骤 。 


所 清除 帧 : 清除 帧 包括 清除 关键 帧 和 清除 帧 ， 
清除 关键 帧 是 将 关键 帧 转换 为 普通 帧 ， 该 帧 
处 的 实例 对 象 保留 ; 清除 帧 是 将 帧 转换 为 空 
白 帧 ,该 帧 处 的 实例 对 象 会 被 删除 .其 方法 是 
在 该 帧 处 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 
中 选择 “清除 关键 帧 ”或 “清除 帧 ”命令 。 


< 


操作 对 象 插入 帧 时 ， 也 会 继承 插入 帧 处 前 一 
帧 的 内 容 ， 如 果 前 一 帧 为 关键 帧 或 帧 ， 则 场 
景 上 的 对 象 也 创建 到 插入 的 帧 或 关键 帧 ， 如 
果 前 一 帧 为 空 ， 则 插入 的 也 为 空 。 删 除 帧 是 
删除 帧 和 场景 中 的 实例 ， 帧 数 会 减少 ， 删 除 
帧 也 可 以 删除 空白 帧 或 空白 关键 帧 ， 并 且 该 
图 层 处 的 帧 数 会 减少 。 清 除 帧 是 清除 该 帧 处 
场景 中 的 对 象 ， 并 将 帧 转变 为 空白 关键 由 
该 图 层 的 帧 数 不 会 减少 。 


如 添加 帧 标签 : 在 动画 制作 的 过 程 中 ， 若 需 
要 注释 帧 的 含义 、 为 帧 标记 或 使 ActionScript 
脚本 能 够 调用 特定 的 帧 ， 就 需要 为 该 帧 添加 
帧 标签 。 其 方法 是 : 在 “时 间 轴 ”面板 中 选 
择 要 添加 标签 的 帧 ， 在 “属性 ”面板 的 “名 称 ” 
文本 框 中 输入 帧 的 标签 名 称 。 
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问 : 在 制作 一 些 较 复杂 需要 切换 场景 效果 的 动画 时 应 该 怎么 办 呢 ? 
答 : 遇 到 这 种 情况 时 ， 用 户 可 以 使 用 “场景 ”面板 来 解决 。 使 用 场景 能 更 
好 地 切换 动画 效果 ， 并 且 能 实现 动画 的 分 段 制 作 ， 便 于 后 期 合成 制作 。 场 


景 的 使 用 就 好 像 将 几 个 较 短 的 Flash 动画 组 成 了 一 个 大 的 


Flash 动画 ， 且 每 个 场景 中 都 有 一 个 时 间 轴 ， 各 个 帧 的 播 
放 会 按照 场景 顺序 连续 进行 播放 。 选 择 【窗口 〗 /【 其 他 
面板 〗/【 场 景 〗 命 令 ， 可 打开 如 右 图 所 示 的 “场景 ” 面 
板 。 在 “场景 ”面板 中 ， 可 根据 需要 添加 场景 ， 其 方法 
是 : 选择 【插入 】〗/【 场 景 〗】 命 令 即 可 。 若 想 删除 场景 ， 
只 需 在 “场景 ”面板 中 选择 需 删除 的 场景 ， 单 击 “场景 ” 


面板 下 方 的 “ 英 除 ”按钮 出 即 可 。 


Hour: 
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6.1.3 ”认识 图 层 


Flash 中 的 图 层 是 相对 独立 的 ， 在 每 个 图 
层 中 的 实例 对 象 相当 于 被 绑 定 到 该 图 层 中 ， 
实例 的 硬 放 顺序 也 会 随 图 层 的 变化 而 变化 ， 
这 样 便于 实例 的 管理 和 动画 的 制作 。 在 动画 
制作 中 ， 图 层 非 常 重要 ， 不 同 的 动画 实例 需 
要 放 在 不 同 的 图 层 中 ， 实 例 之 间 才 不 会 发 生 
混乱 ， 制 作出 的 动画 才 显 得 有 条 理 ， 如 右 图 
所 示 。 


6.1.4 图 层 的 基础 操作 


新 建 的 Flash 文档 中 只 会 包含 一 个 图 层 ， 由 于 一 个 动画 文档 通常 集合 了 大 量 的 动画 素材 等 


元 素 ， 所 以 需要 添加 更 多 的 图 层 。 为 了 方便 动画 的 编辑 ， 用 户 还 可 以 对 图 层 进行 隐藏 、 锁 定 或 
重新 排列 等 基本 操作 。 下 面 对 图 层 的 基本 操作 进行 讲解 。 
个 创 建 图 层 : 单 击 时 间 轴 底部 的 “新 建 层 ” 
按钮 回 。 创 建 一 个 图 层 之 后 ， 该 图 层 将 出 现 
在 所 选 图 层 的 上 方 。 新 添加 的 图 层 将 成 为 当 
前 图 层 。 
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户 选择 图 层 : 在 “时 间 轴 ”面板 中 ， 单 击 图 
层 的 名 称 可 直接 选中 图 层 。 按 住 Shift 键 的 同 
时 单 击 任意 两 个 图 层 ， 可 选中 它们 之 间 的 所 
有 图 层 。 按 Ctrl 键 的 同时 ， 单 击 筷 标 可 选择 
多 个 不 相 邻 的 图 层 ， 如 下 图 所 示 为 选中 不 相 
邻 的 图 层 。 


上 ELAM FL 1 mm 


1 经验 一 筹 仍 一 一 管理 图 层 的 技巧 


单 击 “将 图 层 显 示 为 轮廓 ”按钮 国 可 以 将 该 图 层 中 的 对 象 显 示 为 轮廓 ， 再 次 单 击 该 按钮 可 以 取 


消 显 示 轮 廊 。 当 图 层 增 多 时 ， 可 使 用 图 层 文件 夹 进行 分 类 管理 图 层 ， 其 方法 是 : 在 “时 间 轴 ” 
面板 中 单 击 “ 新 建文 件 夹 ”按钮 辑 新 建 图 层 文件 夹 ， 再 将 图 层 拖 入 到 该 文件 夹 中 即 可 .。 


人 调整 图 层 顺序 : 单 击 并 拖 动 需要 调整 顺序 
的 图 层 ， 拖 动 时 将 会 出 现 一 条 线 ， 到 目标 位 
置 后 释放 鼠标 。 
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从 重 命名 图 层 : 双击 图 层 名 称 ， 当 图 层 名 称 
呈 蓝 色 显 示 时 输入 新 名 称 。 也 可 在 需要 重 命 
名 的 图 层 上 单 击 息 标 右键 ， 在 弹出 的 快捷 菜 
单 中 选择 “属性 ”命令 ， 打 开 “ 图 层 属性 ? 
对 话 框 设置 “名 称 ” 即 可 。 
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但 锁定 图 层 状态 : 可 以 通过 图 层 的 锁定 和 解 
除 锁 定 来 操作 对 应 图 层 中 的 对 象 ， 被 锁定 图 
层 中 的 对 象 不 能 选择 。 在 图 层 中 单 击 该 图 层 
“锁定 或 解除 锁定 所 有 图 层 ” 按 钮 面 下 的 。 
按钮 可 以 锁定 图 层 ， 此 时 呈 国 状态， 再 次 单 
击 自 按钮 可 以 解除 锁定 。 


WEI ET To ar IE 


伸 删 除 图 层 : 对 于 多 余 无 用 的 图 层 ， 用 户 可 
将 其 删除 。 选择 需要 删除 的 图 层 , 在 “时 间 轴 ” 
面板 上 单 击 “ 删 除 ” 按 钮 三 即 可 删除 该 图 层 。 


人 隐藏 图 层 状 态 : 图 层 对 象 也 可 以 隐藏 ， 但 
隐藏 图 层 中 的 对 象 不 能 进行 选择 和 操作 。 在 
图 层 中 单 击 该 图 层 “ 显 示 或 隐藏 所 有 图 层 ” 
按钮 加 下 的 。 按 钮 可 以 隐藏 该 图 层 ， 此 时 
呈 汉 状态， 再 次 单 击 X 按 钮 可 以 显示 该 图 层 。 


复制 、 粘 贴图 层 : 选择 【编辑 ] /时 间 轴 】/ 
【复制 图 层 】 命 令 ， 或 在 需要 复制 的 图 层 上 
单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 复 
制图 层 ”命令 。 选中 需要 粘贴 的 图 层 位 置 下 
方 的 图 层 ， 选 择 【 编 辑 】/【 时 间 轴 了】/【 粘 由 
图 层 ]】 命令 . 
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剧目 四 各 电 js 为 “大 优惠 ”动画 创建 图 层 
包 巩固 图 层 的 创建 方法 ， 掌 握 图 层 的 基本 操作 和 管理 方法 。 
。 @ 掌握 图 层 文件 来 的 创建 和 管理 方法 。 
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本 例 将 通过 为 “大 优惠 ”动画 创建 图 层 来 熟悉 图 层 的 创建 、 移 动 、 
文件 夹 进行 图 层 管理 的 方法 ， 其 最 终 效果 如 下 图 所 示 。 


wi 新 建 Flash 文档 


新 建 Flash 文档 ， 在 “属性 ”面板 中 设置 文 

档 大 小 为 “400x280”。 选 择 【 文 件 】 /【 另 

存 为 ] 命令 , 打开 “另存 为 ”对 话 框 , 设置 “名 

称 ” 为 “为 “大 优惠 ”动画 创建 图 层 .fla”。 
2 单 击 Eeea 按 钮 。 


areP 2 新 建 图 层 


“时 间 轴 ”面板 中 ， 单 击 “新建 图 层 ” 按 钮 加 
层 2。 用 相同 的 方法 创建 14 个 图 层 。 


st 


和 


ice DE 1 st ao LJ 


EE 重合 各 图 导 


双击 “图 层 1” 图 


相 


层 ， 并 重 命名 为 “背景 "。 用 
同 的 方法 分 别 重 命名 其 他 图 层 为 “布景 ”、 
品 1”~ “商品 4” 、' 文 字 1”~ “文字 4" 、 
色 1"、“ 角 色 2" 、“ 音 乐 "、“button" 和 “Action” 。 


机 机 i 文人 天 


在 “时 间 轴 ”面板 中 单 击 3 次 "新建 文件 夹 ” 


全 


2.， 双 击 文件 夹 1， 并 重 命名 为 “商品 ”， 用 相同 
的 方法 重 命名 文件 夹 2、.3 为 "文本 "和 "角色 "。 


按钮 加 ， 新 建 


3 个 文件 夹 。 


“ 商 
“ 角 
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AGE 是。 管理 文件 


将 鼠标 光标 移动 到 图 层 上 ， 按 住 鼠 标 左 键 不 放 ， 
拖 动 到 文件 夹 上 ， 然 后 释放 鼠标 将 图 层 移动 到 该 
文件 夹 下 。 使 用 相同 的 方法 分 别 拖 动 其 他 图 层 到 
相应 文件 夹 下 。 


六 人 ff 


将 鼠标 光标 移动 到 “文本 ”文件 夹 上 ， 按 住 鼠 标 
左 键 不 放 ， 拖 动 到 “角色 ”文件 夹 上 方 的 位 置 ， 
分 别 移动 其 他 文件 夹 和 图 层 的 位 置 。 使 用 相同 的 
方法 将 “商品 " 文件 夹 移动 到 “角色 " 文件 夹 上 方 。 


在 图 层 文件 夹 的 管理 中 ， 可 以 展开 和 收缩 文件 夹 ， 单 击 文件 夹 名 前 方 的 v 按 钮 可 以 使 该 文件 夹 
收缩 ,此 时 该 文件 夹 显示 为 收缩 状态 > ;再 次 单 击 文件 夹 名 前 方 的 > 按钮 可 以 使 该 文件 夹 展开 ， 
此 时 显示 为 展开 状态 v 马 。 将 文件 夹 中 的 图 层 拖 动 到 文件 夹 外 ， 可 将 图 层 移动 到 文件 夹 外 。 


Hour: 
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6.2 素材、 元 件 与 库 的 使 用 

在 制作 复杂 的 动画 时 ， 难 免 会 用 到 重复 的 图 形 对 象 。 虽 然 复制 帧 可 以 重复 使 用 对 象 ， 但 在 
实际 操作 中 最 简单 的 方法 是 创建 元 件 。 元 件 在 动画 的 制作 过 程 中 可 以 重复 使 用 ， 并 且 通 过 元 件 
的 使 用 ， 可 以 让 动画 在 修改 、 管 理 时 更 加 便利 。 此 外 ， 元 件 被 集中 放置 在 “ 库 ” 面 板 中 方便 进 
行 管 理 。 下 面 将 分 别 对 素材 、 元 件 和 “ 库 ” 进 行 讲解 。 


IE------ 


熟练 掌握 素材 的 使 用 方法 。 
纺 快速 认识 元 件 和 “ 库 ”面板 。 


QB, 灵活 运用 “ 库 ” 面 板 管理 元 件 。 


I 
I 
1 ”熟练 图 形 元 件 、 按 钮 元 件 和 影片 剪辑 元 件 的 创建 和 特点 。 
I 
I 


6.2.1 素材 的 使 用 
网 页 中 制作 的 动画 ， 很 多 都 是 使 用 一 些 已 经 制作 好 的 素材 编辑 而 成 的 。 在 Flash 中 素材 的 
使 用 也 是 用 户 需要 特别 注意 的 ， 通 过 好 的 素材 ， 用 户 可 以 快速 地 制作 出 精美 的 动画 效果 。 下 面 
对 素材 的 使 用 进行 讲解 。 
1. Flash 常用 的 图 片 格式 
在 Flash 中 用 户 可 以 导入 矢量 图 形 、 位 图 和 图 像 序列 等 , Flash 常用 的 图 片 格式 有 以 下 几 种 。 
从 JPG 格式 图 片 : JPG 格式 的 图 片 在 保存 时 经 过 压缩 可 使 图 像 文件 变 小 。 
下 GIF 格式 图 片 : GIF 图 片 常 称 为 GIF 动画 ， 它 是 由 一 帧 帧 图 片 拼 登 在 一 起 的 。 
如 PNG 格式 图 片 : PNG 是 一 种 流 式 网 络 图 形 格式 ， 是 位 图 文件 存储 格式 。 特 点 是 压缩 比 高 ， 
生成 文件 容量 小 。 
所 PSD 格式 图 片 : PSD 格式 可 以 存储 Photoshop 中 所 有 的 图 层 、 通 道 、 参 考 线 、 注 解 和 颜 
色 模 式 等 信息 。PSD 格式 在 保存 时 会 将 文件 压缩 ， 以 减少 占用 磁盘 空间 。 
人 加 Al 格式 图 片 : AI 格式 图 片 也 是 一 种 分 层 文 件 , 用户 可 以 对 图 片 内 所 存在 的 图 层 进行 操作 ， 
AI 格式 图 片 是 基于 夭 量 给 出， 可 在 任何 尺寸 大 小 下 按 最 高 分 辨 率 输出 。 


2. 导入 位 图 

一 般 常见 的 位 图 图 片 格式 有 JPG、GIF、 
PNG 等 ,在 Flash 中 导入 这 些 图 片 的 方法 相同 。 
其 方法 是 : 选择 【文件 】/【 导入 】/【 导入 到 
舞台 】 命令 , 打开 “导入 ”对 话 框 , 在 “导入 ” 
对 话 框 中 选择 需 导 入 的 文件 ， 单 击 匡 地 9 症 按 
钮 即 可 ， 如 右 图 所 示 。 导 入 位 图 后 舞台 上 将 
出 现 导入 的 图 形 , 同时 图 形 也 被 保存 到 “ 库 ” 
面板 中 。 els. 

文件 名 (N: 01ljpg bd 3 单 击 ) 


一 筹 乱 一 一 导入 分 层 文 件 
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在 Flash 中 导入 分 层 文件 ， 如 psd、ai 文 件 
时 ， 其 导入 方法 与 导入 普通 的 位 图 有 所 不 
同 。 其 方法 是 : 选择 【文件 ] /【 导 入 ]/ 
【导入 到 舞台 ]〗 命令 ， 打 开 “ 导 入 ”对 话 
框 ， 在 “导入 ”对 话 框 中 选择 需 导 入 的 文 
件 ， 单 击 EEe 按 钮 。 在 打开 的 对 话 框 中 
设置 导入 的 方式 ， 单 击 EEE 本 按钮 确认 导 
入 。 如 右 图 所 示 为 导入 psd 文件 时 出 现 的 
导入 对 话 框 。 


6.2.2 创建 元 件 


HWA FEE | 
楚 将 图 时 区 于 看 抬 这 车 册 ) 
刁 交 生生 大 小 法 和 为 与 Fhotmchep 本 机 大 小 相同 95x 


由 | 固 | 加 | 加 | 轩 | 轩 回国 | | 网 
各 
加 


将 素材 导入 到 Flash 中 ， 用 户 便 可 以 根据 这 些 素材 编辑 动画 。 由 于 同一 元 件 被 多 次 使 用 也 
会 增加 动画 文件 的 大 小 , 所 以 通过 元 件 制作 动画 是 动画 制作 者 都 喜欢 使 用 的 方法 。 除 此 之 外 ， 
元 件 还 可 以 实现 很 多 Flash 特有 的 功能 ， 如 第 5 章 讲解 的 为 图 像 设置 混合 模式 等 。 下 面 就 将 对 


元 件 及 其 创建 方法 进行 详细 讲解 。 
1. 认识 元 件 


元 件 是 指 在 Flash 创作 环境 中 创建 的 图 形 、 按 钮 或 影片 剪辑 。 元 件 可 以 在 整个 文档 或 其 他 


文档 中 重复 使 


， 也 可 以 包含 从 其 他 应 用 程序 中 导入 的 图 像 。 


创建 的 元 件 都 会 自动 保存 到 当前 


文档 的 库 中 。 在 创作 或 运行 时 ， 可 以 将 元 件 作为 共享 库 资源 在 文档 之 间 共 享 。 若 需 运行 时 共享 
资源 , 可 以 把 源 文档 中 的 资源 链接 到 任意 数量 的 目标 文档 中 , 而 无 须 将 这 些 资源 导入 目标 文档 。 
对 于 创作 时 共享 的 资源 ， 可 在 本 地 网 络 上 将 其 他 元 件 更 新 或 替换 。 


元 件 可 以 分 为 图 形 元 件 、 按 钮 元 件 和 影片 剪辑 元 件 3 种 类 型 。 不 同 的 元 件 所 能 使 


以 及 作用 都 有 所 不 同 ， 下 面 分 别 进行 介绍 。 


人 图形 元 件 : 用 于 静态 图 像 ， 常 用 于 在 创建 
连接 到 主 时 间 轴 重复 使 用 的 动画 片段 。 图 形 
元 件 与 主 时 间 轴 同步 运行 由 于 没有 时 间 轴 ， 
图 形 元 件 在 FLA 文件 中 的 尺寸 小 于 按钮 或 影 
片 剪 辑 。 


如 按钮 元 件 : 可 以 创建 用 于 响应 鼠标 单 
击 、 滑 过 或 其 他 动作 的 交互 式 按钮 。 在 
ActionScript 3.0 中 可 以 定义 与 各 种 按钮 状态 
关联 的 图 形 ， 然 后 将 动作 指定 给 按钮 。 


的 范围 


人 影片 剪辑 元 件 : 影片 剪辑 拥有 各 自 独立 于 
主 时 间 轴 的 多 帧 时 间 轴 。 可 以 将 多 帧 时 间 轴 
看 作 是 嵌 套 在 主 时 间 轴 内 ， 其 中 可 以 包含 交 
互 式 控件 、 声 音 甚至 其 他 影片 剪辑 。 


宙 捍 的 影片 前 可 一 般 都 为 多 帧 的 动 
将 影片 剪辑 放 在 动画 的 主 时 间 轴 上 时 ， 该 | 
片 蕴 辑 在 主 时 间 轴 上 将 只 占 一 帧 


| 影 
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2. 创建 图 形 元 件 
当 需 要 旬 
选择 。 


建 静态 图 像 或 链接 到 主 时 间 轴 的 可 重复 用 的 动画 片段 时 ， 创 建 图 形 元 件 是 


最 佳 的 


本 例 将 新 建 一 个 Flash 文档， 并 在 其 中 使 用 新 建 元 件 的 方法 创建 一 个 图 形 元 件 ， 其 具体 操 


作 如 下 ， 


| res Fe 
a TR 

ee 和 | 

CJ 


WT 


1.， 选择 【 插入 】/ 【新建 元 件 】 命 令 , 打开 “ 创 
建新 元 件 ” 对 话 框 , 在 其 中 设置 “名 称 、 类 型 " 
为 “树木 、 图 形 ”。 

2.， 单 击 匡 本 可 按钮 ， 进 入 元 件 编辑 窗口 。 


wi 导入 图 形 


选择 【文件 ] /【 导入 】/【 导入 到 和 舞台】 命 
令 ， 打开 “导入 ”对 话 框 ， 在 其 中 选择 “ 树 
木 .png” 图 像 。 

2 单 击 [Eze 按钮 ， 将 图 像 导入 到 元 件 编辑 窗口 
的 舞台 中 。 


Ey ne 
| 按 CtrHtR 组 合 键 可 快速 打开 “导入 


人 癌 


bil 


新 建文 档 


选择 【文件 ] 作 新 建 ] 命令 , 打开 “新 建文 档 ” 
对 话 框 ,在 其 中 设置 " 宽 、 高 \ 背 景 颜色 "为 "550 
像素 、400 像素 、 绿 色 ( #009999) ”。 

2 单 击 匡 酉 可 按钮 。 


" 时 击 Ja 


dc 


交 煌 SN: 列 林 png 
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wi 应 用 元 件 

单 击 “编辑 栏 ”中 的 “场景 1” 名称 返回 主场 
景 。 按 Ctrl+L 组 合 键 打 开 “ 库 ”面板 。 选 中 
创建 的 “树木 ”元 件 。 

2.， 将 选中 的 元 件 拖 动 到 舞台 中 ， 并 使 用 “任意 
变形 工具 ” 及 调整 元 件 大 小 。 


虽然 图 形 元 件 和 影片 剪辑 元 件 都 可 以 制作 动画 ,但 区 别 在 于 影片 剪辑 可 以 自动 播放 ， 而 且 如 果 
不 加 动作 控制 将 无 限 循环 播放 ， 但 图 形 却 不 行 ， 它 要 求 放置 图 形 元 件 的 位 置 有 足够 多 的 帧 。 


3. 创建 按钮 元 件 

在 制作 需要 完成 提交 或 者 链接 页 面 的 动画 时 ， 常 常 需要 创建 按钮 元 件 。 在 按钮 元 件 的 编辑 
窗口 ， 在 “时 间 轴 ”上 只 有 4 个 帧 ， 它 们 分 别 表 示 了 真实 按钮 的 4 个 动作 。 在 实际 工作 中 ， 
户 并 不 需要 对 时 间 轴 上 的 4 个 由 都 进行 编辑 ， 而 只 需 对 需要 的 帧 进行 编辑 。 


本 例 将 新 建 一 个 按钮 元 件 ， 并 主要 对 “ 弹 起 ” 帧 、“ 单 击 ” 帧 进行 编辑 ， 制 作 一 个 在 使 
鼠标 单 击 时 会 发 生变 化 的 按钮 ， 其 具体 操作 如 下 : 


a i 新 建文 档 

人 选择 【文件 ]/[ 新 建 ] 命令, 打开 “新 建文 档 " 
对 话 框 ,在 其 中 设置 " 宽 、 高 .背景 颜色 "为 "550 
[议和 上 像素 、400 像素 、 绿 色 (#00FFCC ) " 。 
| 2 单 击 EGGE9 按 钮 
Bn | 

CJ 单 击 ) 

GE 


wi 创建 元 件 


选择 【 插入 】/ 【新建 元 件 】 命令 。 打开“ 新 
建新 元 件 ” 对 话 框 , 在 其 中 设置 “名 称 、 类 型 ” 
均 为 “按钮 ”。 

2 单 击 EEsE 梧 按钮， 进入 元 件 编辑 窗口 。 


CE 
(2) 单 击 
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上 创建 关键 帧 。 


入 空白 关 键 居 


在 “时 间 轴 " 面板 中 , 选中 “" 按 下 " 帧 。 按 F7 键 ， 
在 “点 击 ” 帧 上 创建 空白 关键 帧 。 


机 二 和 人 


使 用 前 面 的 方法 ， 将 “ 单 击 .png” 图 像 导 入 到 
舞台 中 。 使 用 “选择 工具 " 图 , 将 导入 的 “ 单 击 ” 
图 像 与 之 前 导入 的 “ 弹 起 ”图 像 位 置 重合 起 来 ， 
使 该 元 件 在 最 后 运行 时 ， 不 会 出 现 单 击 鼠标 图 
像 突 然 移动 的 情况 。 按 F6 键 ， 为 “点 击 ” 帧 插 
入 关键 帧 。 


按 F6 键 ， 在 “时 间 轴 ” 面 板 的 “指针 划 过 ” 帧 


清新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


ey 导入 图 片 


选择 【文件 ] 人 导入 】/【 导入 到 舞台 ] 命令， 
打开 “ 弹 起 .png” 图 像 。 

2. 单 击 EEaea 按 钮 ， 将 图 像 导 入 到 元 件 编辑 窗口 
的 舞台 中 。 


插入 空白 关键 由 


单 击 “ 编 辑 栏 ”中 的 “场景 1” 名 称 返 加 
主场 景 。 按 Ctrl+L 组 合 键 , 打开 “ 库 " 面板 。 
选中 创建 的 “按钮 ”元 件 。 

2. 将 选中 的 元 件 拖 动 到 舞台 中 ， 并 使 用 “ 任 
意 变形 工具 ”出 调整 元 件 大 小 。 
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STEEL08 司 测试 动画 
按 Ctn+Enter 组 合 键 ， 测 试 动画 。 打 开动 画 播放 
窗口 ， 使 用 鼠标 单 击 播放 窗口 中 的 按钮 。 可 看 到 
按钮 在 单 击 时 发 生 了 变化 。 


4. 创建 影片 剪辑 元 件 
在 制作 网 页 动画 时 ， 往 往 需要 制作 一 些 反 复 播放 的 效果 ， 如 文字 或 图 像 的 跳动 等 。 若 是 
户 一 帧 一 帧 的 对 这 些 效果 进行 编辑 ， 很 可 能 会 在 一 个 小 细节 上 花费 大 量 的 时 间 。 其 实 ， 在 制作 


需要 反复 播放 的 效果 时 ， 用 户 可 将 这 部 分 的 效果 编辑 在 一 个 影片 剪辑 元 件 中 。 
本 例 将 制作 一 个 图 像 脉冲 效果 的 影片 剪辑 ， 在 制作 时 将 一 帧 一 帧 地 对 动作 进行 编辑 ， 让 图 
像 变 得 越 来 越 大 ， 其 具体 操作 如 下 : 


SITERIOTE 新 建文 档 
1.， 新建 一 个 大 小 为 1024x680 像素 的 灰色 


EE 2 ( #99999 ) 空白 动画 文档 。 选择 [插入] 省 新 
aed 建 元 件 】 命令， 打开 “创建 新 元 件 ”对 话 框 。 
设置 “名 称 、 类 型 ” 均 为 “影片 剪辑 ”。 
2 单 击 [EE 可 按钮 。 


STHERI02 导入 图 像 
打开 “导入 ”对 话 框 ， 将 “图 片 1jpg” 图 像 导 入 
到 元 件 编辑 窗口 的 舞台 左边 。 


3 
在 导入 “影片 剪辑 1” 图 像 时 ， 将 会 
弹出 一 个 提示 对 话 框 ， le 
的 其 他 图 像 。 为 了 和 本 例 制作 的 顺序 相同 ， 
里 应 该 单 击 EEEE 按钮 。 


RSTEP03 司 ”插入 关键 | 
1. 在 “时 间 轴 ”面板 中 选择 第 10 帧 , 按 F6 键 ， 


插入 关键 帧 
2， 在 场景 第 1 张 图 右边 导入 “图 片 2jpg” 图 像 。 


-STEP 04:: \ 关 键 

1. 选择 第 20 帧 ， 按 F6 键 ， 插 入 关键 帧 。 在 场 
景 第 2 张 图 右边 导入 “图 片 3.jpg” 图 像 。 

2. 使 用 相同 的 方法 ， 将 “影片 剪辑 ”文件 夹 中 
的 剩余 图 像 都 导入 到 场景 中 。 


| 将 “图片 6jpg” 图 片 添加 到 场景 后 ， 
还 需要 在 第 60 帧 插入 关键 帧 ， 否 则 播放 时 ， 
| 将 不 会 显示 最 后 一 张 图 片 。 


:STEP 05:— | 
返回 主场 景 。 从 “ 库 ”面板 中 将 “影片 剪辑 "元件 
移动 到 舞台 左边 。 按 Ctr+Enter 组 合 键 测试 动画 。 


每 个 元 件 实例 者 有 其 特有 的 色彩 效果 。 色彩 效果 是 指 实例 的 显示 亮度 、 色 调 、 高 级 和 Alpha 值 。 
选择 实例 后 ， 在 “属性 ”面板 的 “色彩 效果 ” 栏 的 下 拉 列 表 框 中 选择 不 同 的 选项 ， 然 后 在 其 下 
方 可 分 别 设置 亮度 色调 、 高 级 和 Alpha 值 。 


快速 管理 Flash 中 的 素材 
6.2.3 使 用 “ 库 ” 面 板 


Flash 动画 中 都 会 包含 很 多 素材 、 元 件 等 。 为 了 方便 使 用 动画 中 的 素材 、 元 件 ， 就 需要 使 
到 “ 库 ” 面板 。 通 过 " 库 ” 面板 , 用户 可 以 快速 地 浏览 、 编 辑 元 件 、 插 图 、 视 频 和 声音 等 元 素 。 
1. 认识 “ 库 ” 面 板 
“ 库 ” 面 板 可 以 看 作 是 一 个 影片 的 仓库 ， 所 有 元 件 都 会 被 自动 载 入 到 当前 文档 的 “ 库 ” 面 
板 中 ， 方 便 以 后 制作 动画 时 灵活 调 固定 当前 库 
o“ 库 " 面板 还 可 以 自动 收集 位 图 、 
声音 以 及 各 种 组 件 ， 可 以 通过 文件 
夹 来 管理 这 些 对 象 。 
新 建 Flash 文档 的 “ 库 ” 面 板 。 项 目 预 览 区 
是 空 的 ， 在 菜单 栏 中 选择 【 窗口 ] / 统计 与 搜索 
【 库 】 命 令 或 按 CtrltL 组 合 键 ， 可 
以 打开 如 右 图 所 示 的 “ 库 ” 面 板 。 
“ 库 " 面板 中 各 部 分 作用 如 下 。 


文档 列表 


功能 按钮 


如 文档 列表 : 用 于 显示 当前 库 所 属 的 文档 。 单 击 该 下 拉 列 表 框 ， 可 在 弹出 的 选项 中 选择 已 在 
Flash 中 打开 的 文档 。 

个 项 目 预览 区 : 当 在 面板 中 选中 项 目 后， 在 预览 区 中 即 会 显示 该 项 目的 预览 图 。 若 选中 的 项 
目 是 影片 剪辑 和 声音 时 ， 在 预览 区 右上 角 将 会 出 现 国 按钮 ， 单 击 该 按钮 可 进行 播放 。 

如 统计 与 搜索 : 该 区 域 左 边 用 于 显示 库 中 包含 了 多 少 个 项 目 。 若 库 中 的 项 目 太 多 时 ， 可 在 右 
边 的 搜索 栏 中 输入 关键 词 ， 帮 助 查找 项 目 。 

从 功能 按钮 : 用 于 存放 了 和 库 面板 相关 的 常见 操作 。 从 左 到 右 依次 为 “新 建 元 件 ” 按 钮 回 ， 
用 于 创建 新 元 件 ; “新 建文 件 夹 ”按钮 男 ， 单 击 该 按钮 可 新 建 一 个 文件 夹 ， 将 相同 属性 的 
项 目 放 在 同一 个 文件 夹 中 更 容易 管理 ; “属性 ”按钮 回 ， 选 中 一 个 元 件 后 ， 单 击 该 按钮 ， 
在 打开 的 对 话 框 中 可 完成 修改 属性 的 相关 操作 ; “删除 ”按钮 于 ， 单 击 该 按钮 可 删除 选中 
的 项 目 。 

介 固定 当前 库 : 单 击 “固定 当前 库 ” 按 钮 国 后 ， 即 使 切换 了 文档 。 库 面板 中 的 项 目 也 不 会 因 
为 文档 改变 而 改变 。 

侣 库 面 板 菜单 : 单 击 “ 库 面板 菜单 ”按钮 团 ， 在 弹出 的 下 拉 列 表 中 基本 包含 了 所 有 和 库 相 关 
的 操作 ， 如 新 建 、 删 除 和 编辑 属性 等 操作 。 

但 新 建 库 面板 : 当 库 中 项 目 太 多 时 ， 为 了 调用 元 件 方便 可 以 单 击 “ 新 建 库 面 板 ” 按 钮 国 。 单 
击 后 可 同时 打开 多 个 面板 ， 显 示 库 中 内 容 。 

愉 列 标题 : 在 其 中 显示 了 “名 称 ”、“AS 链接 ”、“ 使 用 次 数 ”、“ 修 改 日 期 ”、“ 类 型 ” 
等 和 项 目 相关 的 信息 。 默 认 情 况 下 只 显示 “名 称 ” 和 “AS 链接 ” ， 若 想 查看 其 他 信息 ， 
只 需 滚动 “ 库 ” 面 板 下 方 的 水 平滑 块 进行 查看 。 

如 项 目 列表 : 用 于 显示 该 文档 中 包含 的 所 有 元 素 ， 包 含 插图 、 元 件 和 音频 等 。 
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2. 管理 和 使 用 库 


) 板 用 于 收集 元 件 、 位 图 、 声 音 以 及 各 种 组 件 ， 因 此 也 可 以 在 库 中 管理 和 使 用 这 些 
对 象 。“ 库 ”面板 包括 预览 窗口 、 项 目 窗口 和 选项 按钮 。 其 中 ， 预 览 窗 显示 所 选 对 象 的 
内 容 ; 项 目 窗口 用 于 收集 对 象 ， 选 项 按钮 包括 新 建 元 件 、 新 建文 件 夹 、 属 性 和 删除 按钮 ， 这 些 
按钮 主要 用 于 对 库 项 目 对 象 进行 管理 等 操作 。 下 面 分 别 讲解 管理 和 使 用 库 的 方法 。 


如 使用“ 库 ” 面 板 中 的 对 象 : 使 用 “ 库 ” 面 
板 中 的 项 目 ， 可 以 将 鼠标 光标 移动 到 预览 窗 
口 的 对 象 或 项 目 窗口 的 对 象 上 ， 按 住 鼠 标 拖 
动 到 场景 中 释放 鼠标 。 


从 移动 项 目 : 可 将 项 目 对 象 分 类 放 在 文件 夹 中 
进行 管理 ， 以 方便 使 用 而 不 凌乱 。 其 方法 是 : 
将 鼠标 光标 移动 到 对 象 上 ， 按 住 鼠 标 左 键 拖 
动 其 到 文件 天 图 标 上 释放 左 键 ， 即 可 将 对 象 
移动 到 该 文件 夹 中 。 


1 经 验 一 敌 能 一 一 通过 “ 库 ” 面 板 创建 元 件 


在 “ 库 ” 面 板 右 上 方 单 击 图 按钮 ， 在 弹出 的 下 拉 列 表 中 选择 “创建 元 件 ”选项 ; 或 在 


但 新 建文 件 夹 : 在 “ 库 ” 面 板 中 也 可 以 使 用 
文件 夹 来 管理 项 目 对 象 , 在 面板 下 方 单 击 “ 新 
建文 件 夹 ”按钮 国 。 将 需要 存放 在 新 建文 件 
夹 中 的 组 件 移 至 文件 夹 中 即 可 ， 若 双击 文件 
夹 对 象 可 以 重 命名 文件 夹 


旭 管 理 文件 夹 : 和 “时 间 轴 ”面板 的 文件 天 
一 样 ，“ 库 ”面板 中 的 文件 夹 也 可 以 展开 和 
收缩 ， 单 击 珊 按钮 可 收缩 文件 夹 ， 此 时 文件 
天 显示 为 胶 癌 ， 单 击 加 按钮 可 展开 文件 天 ， 此 
时 文件 夫 显 示 为 国史 


和 


ML 
HE BS 


“ 库 ” 面 


板 下 方 单 击 “ 新 建 元 件 ” 按 钮 回 ， 打 开 “ 创 建新 元 件 ” 对 话 框 即 可 创建 元 件 。 


快速 管理 Flash 中 的 素材 


人 更 改 项 目 属性 : 3 种 元 件 都 可 以 更 改 类 型 ， 人 复制 项 目 : 若 制 作 的 动画 中 ， 使 用 多 个 相 

其 方法 是 : 在 “项 目 ” 窗 口中 选择 元 件 ， 在 。 似 的 素材 项 目 ， 用 户 可 在 “ 库 ” 面 板 中 对 元 

面板 下 方 单 击 “ 属 性 按钮 国 , 打开 “元 件 属性 ” ” 件 对 象 进行 复制 ， 再 对 副本 进行 修改 。 其 方 

对 话 框 ， 在 “类 型 ”下 拉 列 表 框 中 更 改元 件 ”法 是 : 选择 对 象 ， 单 击 息 标 右键 ， 在 弹出 的 

的 类 型 即 可 。 快捷 菜单 中 选择 “直接 复制 ”命令 ， 打 开 “ 直 
接 复制 元 件 ” 对 话 框 ， 单 击 EE 有 宇 避 按钮 复 制 
元 件 。 


但 将 舞台 中 的 对 象 转换 为 元 件 : 将 舞台 中 需 
要 转换 元 件 的 对 象 ， 拖 动 到 “ 库 ” 面 板 上 。 
在 打开 的 “转换 为 元 件 ” 对 话 框 中 进行 设置 。 


人 一 筹 管 一 一 元 件 的 特性 


当 元 件 中 的 对 象 需要 重复 使 用 ， 但 有 局 部 改 
动 时 ， 如 果 直 接 在 元 件 编辑 模式 中 修改 ， 其 
他 使 用 该 元 件 的 地 方 也 会 发 生 相 同 的 改变 ， 
因此 可 以 通过 直接 复制 元 件 ， 新 建 该 元 件 的 
副本 ， 副 本 元 件 也 可 重 命名 ， 修 改 副本 中 的 
实例 对 象 或 动画 过 程 ， 不 会 改变 原 元 件 中 的 
对 象 或 动画 过 程 。 


筹 仍 一 一 “公用 库 ” 的 使 用 


为 了 更 快 地 完成 动画 的 制作 , 用户 可 以 使 用 Flash 中 自 带 的 “公用 库 ” 向 动画 文档 中 添加 如 按钮 、 
图 形 、 影 片 葛 辑 元 件 和 声音 等 元 素 。 其 使 用 方法 是 : 选择 【窗口 〗/【 公 用 库 】〗 命 令 ， 在 打开 的 
库 中 选择 需要 的 元 件 将 其 拖 动 到 舞台 中 即 可 使 用 。 此 外 ， 用 户 还 可 以 将 自己 经 常 使 用 的 库 资源 
创建 为 一 个 自 定义 公用 库 ， 方 便 制作 动画 时 调用 。 


读 


人 


训话 新 手 学 做 网 站 (Dreamweaver+Flash+Pho 


国 目 本 制作 生日 贺 


巩固 元 件 的 分 类 和 基本 创建 方法 。 
G 进一步 掌握 图 形 绘制 技巧 和 动画 制作 


-五 


回 


toshop CS6 版 ) 


pb 元件 的 合理 选择 方法 。 


本 例 将 为 新 建 “ 生 日 
的 元 件 ， 最 后 输入 文字 ， 制 作 一 个 效果 完整 的 4 


贺卡 ”动画 导入 素材 


、 绘 制图 形 ， 并 将 素材 和 图 形 分 别 制作 为 不 同 


日 贺卡 ， 其 最 终 效 果 如 下 图 所 示 。 


. 新 建 Flash 文档 ， 在 场景 的 空白 处 单 击 。 再 在 
“属性 " 面板 中 , 设置 “ 宽 、 高 、 颜 色 " 为 “1200 
像素 、815 像素 、 牧 黄色 (#FFFFCC ) ”。 

2.， 选 择 【 文件 ] /【 导入 】/【 导入 到 库 中 】 命令， 
在 打开 的 对 话 框 中 ， 将 “生日 贺卡 ”文件 来 
中 所 有 的 图 片 导 入 到 “ 库 ” 中 。 


AGE 最。 转换 为 元 件 


1， 在 " 库 " 面板 中 , 将 “背景 "图 


像 拖 动 到 舞台 中 。 


选择 【 编辑 ] /【 转换 为 元 件 ] 命令 , 打开 “ 转 
换 为 元 件 ”对 话 框 ， 在 其 中 设置 名 称 和 类 型 。 
单 


[本 按钮。 


2 
” 将 背景 图 像 转换 为 元 件 可 以 方便 制 


快速 管理 Flash 中 的 素材 车 


AGE 二。 设置 元 件 透明 度 

1. 选择 第 24 帧 ， 按 两 次 F6 键 ， 在 第 24 帧 、 
25 帧 插入 关键 帧 。 

2. 选择 第 25 帧 中 的 “背景 ”元 件 。 在 “属性 " 

面板 中 展开 “色彩 效果 ” 栏 ， 设 置 “ 样 式 、 

Alpha” 为 “Alpha、80%”。 


使 用 相同 的 方法 ， 在 第 30 帧 、 第 35 帧 、 
第 40 帧 处 插入 关键 帧 ， 并 分 别 设 置 它们 的 
“Alpha” 为 “60%、40%、20%”。 

2.， 在 “时 间 轴 ”面板 上 ， 单 击 “ 新 建 图 层 ” 按 
钮 可， 新 建 图 层 2。 选 择 第 6 帧 并 插入 空白 关 
键 帧 。 


wiet 

1.， 选择 【 插入 】/ 【新建 元 件 】 命令, 打开 “ 创 
建新 元 件 ” 对 话 框 , 在 其 中 设置 “名 称 、 类 型 " 
为 “蛋糕 1、 影片 剪辑 ”。 

2， 单 击 EE 二 本 按钮 。 


TEP 06，。 添加 素材 

1.， 从 “ 库 ” 面 板 中 ， 将 “蛋糕 1” 图 像 移动 到 和 舞 
台中 , 并 使 用 "任意 变形 工具 ” 顺 将 其 缩小 。 
. 选择 第 7 帧 ， 按 两 次 F6 键 ， 插 入 两 个 关键 帧 。 


和 和 
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i 

1.， 选择 第 8 帧 上 的 图 像 ， 按 CtritT 组 合 键 ， 打 

开 “ 变 形 ” 面 板 ， 单 击 “ 约 束 ”按钮 加， 将 
对 象 的 缩放 宽度 、 缩 放 高 度 比 例 断 开 。 

2.， 设置 “缩放 宽度 " 为 “17.0”。 


继续 编辑 元 件 


选择 第 11 帧 ， 插 入 关键 帧 。 

2. 在 "变形 " 面板 中 设置 "缩放 宽度 " 为 10.0" 。 
使 用 相同 的 方法 ， 在 第 14 帧 、 第 17 帧 插入 
关键 帧 ， 分 别 设置 它们 的 缩放 宽度 为 “16.0、 
22.0" 。 


wi 应 用 元 件 


返回 主场 景 ， 从 “ 库 ” 面 板 中 将 “蛋糕 1” 元 
件 移动 到 图 层 2 的 第 6 帧 。 
2. 选择 第 30 帧 ， 在 第 30 帧 插入 关键 帧 。 


计 


文部 分 


一 a 
| 在 制作 罗 卡 这 类 动画 时 ， 为 了 动 | 
| 的 整体 效果 着 想 ， 最 好 先 制作 动画 部 分 再 制作 
! | 


单 击 “ 新 建 图 层 ” 按 钮 加， 新 建 图 层 3。 


2. 选择 第 35 帧 , 在 第 35 帧 插入 关键 帧 。 在 “ 库 ” 
面板 中 ， 将 “蛋糕 2” 图 像 移动 到 场景 中 。 

3 选中 “蛋糕 2” 图 像 ， 按 F8 键 ， 打 开 “ 转 换 

为 元 件 ” 对 话 框 ， 设 置 “名 称 、 类 型 ”为 “ 蛋 

糕 2、 图 形 ”， 单 击 攻 且 本 按钮 。 


Jan pm lic a0: S Kap 


机 I 形 类 


1.， 选择“ 椭圆 工具 ” 同 ， 在 “属性 ”面板 中 设 
置 “ 描 边 颜 色 、 填 充 颜 色 ” 为 “#FF9900、 
#FF9900" , 并 设置 它们 的 "Alpha 为 “60%”。 

2.， 使 用 鼠标 在 图 像 上 绘制 一 个 正 圆 。 


丁丁 、 设 二 条 化 描 这 

1. 选择 绘制 的 形状 ， 再 选择 【修改 】/【 形状 】/ 
【和 柔 化 填充 边缘 ] 命令 ,打开 “ 柔 化 填充 边缘 ” 
对 话 框 ， 在 其 中 设置 “距离 、 步 长 数 "为 “40 
像素 、10" 。 


| 
| 为 图 开 汪 二 化 入 入 外 和 了 制 | | 
| 作 灶 光 边 缘 的 腊 胱 | 
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本本 二 和 王 粒 2 元 件 


选择 “蛋糕 2" 元 件 , 在 “属性 " 面板 中 设置 “Alpha” 
为 “20%”。 在 第 40 帧 、 第 45 帧 、 第 50 帧 和 
第 55 帧 插入 关键 帧 ， 并 设置 其 中 的 “Alpha” 分 
别 为 “40%、60%、80%、100%”。 


iit 
1. 在 图 层 3 的 第 90 帧 插入 关键 帧 。 新 建 图 层 4， 

在 第 55 帧 插入 关键 帧 。 
2.， 选择 【 插入 】/【 新 建 元 件 】 命 令 ， 打 开 “ 创 
建新 元 件 ” 对话 框 , 设置 “名 称 、 类 型 " 为“ 烛 
光 、 影 片 剪 辑 ”， 单 击 EEE 可 按钮 。 
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wR 编辑 元 件 


在 第 7 帧 插入 关键 帧 ， 使 用 “任意 变形 工具 ” 
吴 ， 将 图 形 缩小 。 

2. 选择 第 1~15 帧 ， 单 击 鼠 标 右键 ， 在 弹出 的 快 
捷 菜 单 中 选择 “创建 补 问 形 状 ” 命 令 。 


癌 得 个 本 | 
'¥ 创建 补 问 形状 后 ， 娄 光 可 王 现 闪 星 
rs 


i 


选择 第 1 帧 ， 在 其 上 单 击 鼠标 右键 ， 在 弹出 的 快 
捷 菜 单 中 选择 “复制 帧 ”命令 。 选 择 第 30 帧 ， 在 
从 3 Uy ee su 其 上 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 “ 粘 
贴 帧 ”命令 。 返 回 场景 1。 


本本 于 点 用 灿 光 元 伯 

1. 选择 图 层 4 的 第 55 帧 , 从 “ 库 ” 面板 中 将 “ 烛 
光 ” 元 件 拖 动 到 烛 火 上 。 

2. 选择 第 90 帧 ， 按 F7 键 插入 关键 帧 。 


9 es 个 柄 | 
| Dn 图 像 完全 显 ， | 
区 未 出 时 闪烁 烛光 效果 。 | 


. 层 上 除 第 6 帧 外 的 所 有 帧 。 
单 击 鼠 标 右键 在 弹出 的 快捷 菜单 中 选择 “ 删 
除 帧 ”命令 。 在 第 6 帧 处 插入 关键 帧 。 

2.， 选择 “文本 工具 ” 国 ， 在 “属性 ”面板 中 设 
置 “系列 、 大 小 、 颜 色 ” 为 “ 汉 仪 娃娃 繁 简 、 
40 点 、 黑 色 (#333333 ) ”。 使 用 鼠标 在 场 
景 左 上 角 输 入 文本 ,并 使 用 "任意 变形 工具 " 喘 


将 其 旋转 为 合适 角度 。 


快速 管理 Flash 中 的 素材 


AGE 遇 。 设置 文本 透明 度 


选择 输入 的 文本 ,在 “属性 ”面板 中 设置 “Alpha" 
为 “20%”。 在 第 10 帧 、 第 15 帧 、20 帧 插入 
关键 帧 ， 分 别 设置 其 “Alpha” 为 “40%、60%、 
80%”。 最 后 在 第 34 帧 插入 关键 帧 。 


AGE 列国。 丝 统 输入 文本 


在 第 35 帧 插入 空白 关键 帧 ， 使 用 “文本 工具 ” 国 
输入 文本 并 设置 文本 颜色 为 “白色 ( 帮 FFFFF )”。 
在 “属性 ”面板 中 设置 “Alpha” 为 “20%”。 
使 用 之 前 的 方法 在 第 40 帧 、45 帧 、 第 50 帧 、 
第 55 帧 ， 分 别 设置 “Alpha” 为 “40%、60%、 
80%、100%”。 在 第 60 帧 插入 关键 帧 。 


醒 醒 本 输入 并 编辑 生日 快乐 


在 第 65 帧 插入 空白 关键 帧 ， 使 用 “文本 工具 ” 贺 
输入 文本 并 设置 文本 大 小 为 “78 点 ”。 在“ 属性” 
面板 中 设置 “Alpha” 为 “20%”。 使 用 之 前 的 方 
法 在 第 70 帧 、75 帧 、 第 80 帧 和 第 85 帧 处 插入 
关键 帧 ， 分 别 设置 “Alpha” 为 “40%、60%、 
80%、100%”。 在 第 90 帧 插入 关键 帧 。 


| i i 
月 @@v 计 加 织 甘 革 信 四 四 辣 fH A 0 ‘STEP 22: ~ 输入 Action Script 语句 


Ee 新 建 图 层 ， 在 第 90 帧 插入 空白 关键 帧 。 按 F9 键 ， 
打开 “动作 ”面板 ， 在 其 中 输入 “Stop();”。 完 
成 后 即 可 按 Ctrl+Enter 组 合 键 ， 测 试 动画 。 


EL38J 
加 1 行 ( 半 1 行 ) , 妆 7 列 


研 --- 一 一 --- 一 ----- 一 一 --- 一 一 ----- 一 一 -一 一 一 ----- 一 ---- 一 --- 一 一 -- 一 -一 ------ 一 ----- 一 --------- 一 ---: 
输入 该 ActionSeript 语句 后 ， 本 Flash 动画 将 只 播放 一 次 。 需要 注意 的 是 ， 输 入 ActionScript | 
语句 时 应 该 确保 输入 法 状态 为 英文 半角 状态 。ActionScript 语 句 的 具体 应 用 将 在 第 8 章 的 8.1 节 中 进行 | 

讲解 。 | 
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6.3 练习 1 小 时 


本 章 主要 介绍 了 图 层 的 作用 、 创 建 元 件 的 方法 以 及 “ 库 ” 面 板 的 使 用 等 知识 ， 用 户 要 想 在 
日 常 工作 中 熟练 使 用 它们 ， 还 需 再 进行 巩固 练习 。 下 面 以 新 建 “唐诗 ”Flash 文档 为 例 ， 进 一 


步 巩固 这 些 知 识 的 使 用 方法 。 


新 建 “ 唐 诗 ”Flash 文档 
本 例 将 开始 新 建 Flash 文档 ， 再 将 素材 导入 到 文档 中 后 ， 新 建 元 件 ， 设 置 图 像 透 明度 制 
作 慢 慢 显示 的 效果 。 最 终 效果 如 下 图 所 示 。 


vo 


制作 网 页 简单 动画 。 


学 习 了 4 时; 。 创建 基本 动画 
FP? TT TT «00 | 多 动 ) 画 
a dd ds 
富 , 包括 逐 帧 动画 、 补 间 形 状 动画 、 传 统 补 间 动画 、: 
补 间 动画 、 引 导 层 动画 和 庶 淖 动画 等 。 用 户 可 以 : 
选择 需要 的 动画 进行 创建 ， 也 可 根据 实际 需要 ，: @ [ 
在 Flash 动画 中 添加 声音 或 视频 ， 使 动画 效果 更 加 


上 机 了 小 时 
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7.1 创建 基本 动画 


在 Flash 动画 中 最 基本 的 元 素 是 帧 和 关键 帧 ， 而 对 动画 的 制作 和 编辑 ， 实 际 上 就 是 对 帧 和 
关键 帧 所 做 的 编排 和 调整 。 通 过 对 动画 中 的 关键 帧 和 帧 创建 各 种 动画 ， 可 以 得 到 很 多 奇妙 的 动 
画 效 果 。 下 面 就 将 讲解 在 Flash 中 创建 基本 动画 的 方法 。 


DIE ------ 


久 了 解 Flash 动画 的 类 型 特点 。 熟练 掌握 逐 帧 动画 的 制作 。 
1 , 熟练 掌握 补 间 动 画 的 制作 。 熟练 掌握 补 间 形 状 动画 的 制作 。 
1 熟练 掌握 传统 补 间 动 画 的 制作 。 马 学 习 掌握 引导 层 动画 的 制作 。 
| 


1 ”人 < 熟练 学 握 遮 壳 动 画 的 制作 。 用 | 


7.1.1 Flash 基本 动画 类 型 
Flash 动画 是 通过 时 间 轴 上 对 帧 的 播放 ， 实 现 各 帧 中 的 舞台 实例 的 变化 而 产生 动画 效果 ， 

动画 的 播放 快慢 是 由 帧 频 控 制 的 。Flash 提供 了 多 种 创建 动画 和 特殊 效果 的 方法 ， 通 过 Flash 可 
制作 逐 帧 动画 、 补 间 形 状 动画 、 传 统 补 间 动 画 、 补 间 动 画 、 引 导 层 动画 和 庶 罩 动画 等 。 其 特点 
和 效果 如 下 。 

所 逐 帧 动画 : 逐 帧 动画 通常 由 多 个 连续 关键 ”各 补 间 形 状 动画 : 补 间 形 状 动画 是 通过 Flash 
帧 组 成 ， 通 过 连续 表现 关键 帧 中 的 对 象 ， 从 ”计算 两 个 关键 帧 中 矢量 图 形 的 形状 差异 ， 并 
而 产生 动画 的 效果 。 在 关键 帧 中 自动 添加 变化 过 程 的 一 种 动画 


上 经 验 一 筹 能 一 一 制作 补 间 形 状 动画 的 技巧 


只 能 为 未 被 组 合 的 矢量 图 创建 补 间 形 状 动画 ， 对 于 文本 、 元 件 、 对 象 和 组 合 图 形 ， 可 以 按 
Ctrl+B 组 合 键 分 离 后 创建 补 间 形 状 动画 。 


个 传统 补 间 动 画 : 传统 补 间 动 画 是 根据 同一 
对 象 在 两 个 关键 帧 中 的 位 置 、 大 小 、Alpha 
和 旋转 等 属性 的 变化 由 Flash 计算 自动 生成 
的 一 种 动画 类 型 。 它 的 结束 帧 中 的 图 形 与 开 
始 帧 中 的 图 形 密切 相关 。 


所 引导 层 动画 : 运动 引导 层 通 过 绘制 路 径 
可 以 使 补 间 实 例 、 组 或 文本 块 沿 着 这 些 路 径 
运动 ， 该 动画 和 通过 绘制 运动 路 径 制作 补 间 
动画 的 效果 相似 。 


制作 网 页 简单 动画 


如 补 间 动画 : 使 用 补 问 动画 可 设置 对 象 的 属 
性 ， 如 大 小 、 位 置 和 Alpha 等 。 补 间 动 画 在 
时 间 轴 中 显示 为 连续 的 帧 范围 ， 默 认 情况 下 
可 以 作为 单个 对 象 进行 选择 。 


ae ui al | 


ET 


如 遮 罩 动 画 : 使 用 迹 曾 层 创建 一 个 孔 ， 通 过 
这 个 孔 可 以 看 到 下 面 的 图 层 。 遮 单项 目 可 以 
是 填充 的 形状 、 文 字 对 象 、 图 形 元 件 或 影片 
剪辑 。 将 多 个 图 层 组 织 在 一 个 遮 章 层 下 可 创 
建 复杂 的 效果 。 


Jy Wl es HU | 
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7.1.2 ”创建 逐 帧 动画 


在 时 间 帧 上 逐 帧 绘制 一 帧 一 帧 的 内 容 称 为 逐 帧 动画 ， 由 于 是 一 帧 一 帧 地 画 ， 所 以 逐 帧 动画 


具有 非常 大 的 灵活 性 ， 几 乎 可 以 表现 任何 想 表 现 的 内 容 。 逐 帧 动画 运 


了 最 原始 的 动画 原理 ， 


在 每 一 个 关键 帧 上 制作 、 编 辑 对 象 ， 再 进行 连续 的 播放 。 


本 例 将 制作 一 个 倒计时 表 的 动画 效果 ， 首 先 将 绘制 背景 ， 然 后 制作 杂 点 元 件 ， 


本 制作 倒数 计时 效果 ， 其 具体 操作 如 下 : 


最 后 输入 文 


在 场景 中 ， 使 用 


杂 点 。 


绘制 杂 点 
“铅笔 工具 ”加 随意 绘制 白色 的 


让 
Ey 
在 绘制 杂 点 时 ， 杂 点 不 宜 过 长 ， 


绘制 时 最 好 使 用 两 种 以 上 的 路 径 大 小 对 杂 点 


人 


二 

新 建 一 个 大 小 为 “800 x 600 像素 ”、 颜 色 为 “ 黄 
色 (#FF9900 ) ”的 空白 动画 文档 。 使 用 “椭圆 
工具 ” 吏 及 “线条 工具 ” 国 在 场景 中 绘制 形状 ， 
并 设置 “填充 色 ” 为 “无 ”，“ 笔 触 颜色 、 笔 触 ” 
为 “白色 、10.00”，“Alpha” 为 “50%”。 


AGE 02。 新建 元 件 


1.， 在 “时 间 轴 ”面板 中 单 击 压 按 钮 ， 锁 定 图 层 1。 

2.， 选 择 【 插入 】/【 新 建 元 件 】 命令, 打开 “ 创 
建新 元 件 ” 对 话 框 ， 在 其 中 设置 “名 称 、 类 型 ” 
为 “ 杂 点 、 影 片 剪 辑 ”。 

3 单 击 到 可 按钮 ， 进 入 元 件 编辑 窗口 。 
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sim 

按 F7 键 , 插入 空白 关键 帧 , 使 用 “铅笔 工具 ” 辆 
绘制 杂 点 。 在 第 3 帧 ~ 第 7 帧 插入 关键 帧 ， 继 续 
使 用 “铅笔 工具 ”加 在 场景 中 绘制 杂 点 。 


ET 六根 i ie 
| Dt 一 定 要 注意 | 
1 将 每 帧 动画 绘制 出 不 同 的 形状 效果 。 昌 


机 二 绘制 形状 

1， 在 “时 间 轴 ”面板 上 单 击 “ 绘 图 纸 外 观 * 按 
钮 于 ， 显 示 绘 图 纸 功能 。 

2。 使 用 鼠标 将 帧 标题 上 的 游标 向 左 拖 动 至 第 1 
帧 处 ， 将 所 有 帧 的 内 容 都 显示 出 来。 

3， 选择 “矩形 工具 " 国 ， 设 置 “ 填 充 色 " 为 “ 白 

色 (#FFFFFF)”，“Alpha” 为 “20%”。 

使 用 “矩形 工具 "加 在 场景 中 绘制 矩形 ， 使 

矩形 将 所 有 杂 点 狂 盖 。 


显示 绘图 纸 功能 后 ， 再 次 单 击 “ 绘 
”按钮 回 ， 可 隐藏 绘图 纸 功能 。 


一 敌 乱 一 一 绘图 纸 功能 


由 于 逐 帧 动画 需要 一 帧 一 帧 地 进行 制作 ， 为 了 制作 效果 的 连贯 、 整 齐 ， 在 制作 逐 帧 动画 时 ， 动 
画 制 作者 经 常会 使 用 绘图 纸 外 观 功能 ， 将 正在 编辑 帧 附近 的 帧 都 显示 出 来 ， 方 便 对 比 前 后 帧 的 
效果 。 


ASTER 06，。 应 用 元 件 

返回 主场 景 ， 取消 显示 绘图 纸 外 观 。 新 建 图 层 2。 
从 “ 库 ” 面 板 中 将 “ 杂 点 ”元 件 移动 到 场景 中 ， 
并 缩放 元 件 ， 使 其 完全 覆盖 场景 。 


9 坦 个 本 a 

如 果 缩 放 后 的 元 件 不 能 完全 覆盖 场 | 
景 ， 则 在 播放 动画 时 ， es | 
_ 浅 白色 责 关 的 区 域 
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TERI07 输入 文本 
1.， 新 建 图 层 3， 选 择 第 1 帧 。 选 择 “ 文 本 工具 ” 
国 ， 在 “属性 ”面板 中 设置 “系列 、 大 小 、 
颜色 ”为 “DigifaceWide、200.0 点 、 白 色 
(#FFFFFF ) ”。 
2.， 在 “属性 ” 面板 的 “段落 ” 栏 中 , 单 击 国 按钮 ， 
将 文本 居中 对 齐 。 
3. 在 舞台 上 单 击 输入 文本 。 Ee 
在 “段落 ” 栏 中 单 击 国 按钮 是 为 了 
在 制作 数据 时 ， 能 使 输入 的 数据 都 对 齐 。 


ISTER08 继续 输入 文本 
1.， 按 F6 键 ,插入 关键 帧 。 将 “10” 文 本 改 为 “9" 
文本 。 使 用 相同 的 方法 ， 新 建 8 个 关键 帧 ， 
并 对 其 中 的 文本 进行 修改 。 
2.， 在 图 层 2、 图 层 3 的 第 10 帧 插入 关键 帧 。 
3.， 在 “时 间 轴 ”面板 上 ， 设 置 “ 帧 速率 ”为 
“12.0fps”。 


10 输入 ) 


经 验 一 敌 储 一 一 帧 速率 的 使 用 技巧 


由 于 逐 帧 动画 的 特点 ， 每 个 画面 可 能 会 很 快 地 播放 过 去 ， 这 样 起 不 到 强调 动画 效果 的 作用 。 所 
以 合理 地 控制 帧 速率 ， 可 以 使 一 些 逐 帧 动画 的 画面 以 特写 慢 放 的 方式 展示 。 


STEP093> 测试 动画 
按 Ctrl+Enter 组 合 键 ， 测 试 动画 。 可 看 到 动画 在 
不 断 地 播放 倒数 计时 效果 。 


7.1.3 创建 补 间 形 状 动画 

补 间 形 状 动画 可 以 在 两 个 关键 帧 之 间 为 图 形 或 图 像 创建 自然 过 渡 的 变形 动画 效果 。 创 建 补 
间 形 状 动画 后 ，Flash 将 自动 在 两 帧 的 中 间 创 建 一 个 形状 变 为 另 一 个 形状 的 动画 。 补 间 形 状 动 
画 常 被 应 用 于 文字 变形 或 图 形变 形 效果 。 
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本 例 将 通过 补 间 形 状 动画 制作 动物 变形 的 动画 效果 ， 其 具体 操作 如 下 : 


AGEE 02。 纺 放 阁 图 像 


1. 新 建 图 层 2， 选 择 第 1 帧 。 从 “ 库 ” 面 板 中 
将 “ 狗 .png” 图 像 移 动 到 场景 中 间 。 
2. 按 Ctr+tT 组合 键 打开 “变形 ”面板 ， 在 


“140.0%”。 


中 设置 “缩放 宽度 、 缩 放 高 度 ” 均 为 


轴 痊 信 本 SS 
| 使 用 “变形 ”面板 缩放 图 像 大 小 ， 
本 可 以 使 编辑 的 两 个 动物 图 像 大 小 相同 。 


本 将 位 图 


选择 “ 狗 ” 图像 ， 再 选择 【修改 】/【 位 图 】/ 


【 转换 位 图 为 矢量 


2. 打开 “转换 位 图 为 矢量 图 ”对 话 框 ， 在 其 中 


设置 "颜色 阅 值 、 最 / 
3 单 击 芭 可 按钮 。 


转换 为 矢量 图 


] 命令 。 


\ 区 域 " 为 “5、50 像素 " 。 


新 建 一 个 1000 x 795 像素 的 空白 动画 文档 , 将 " 动 
画 变形 " 文件 夹 中 的 所 有 图 像 导 入 到 “ 库 " 面板 中 
再 将 “背景 .png” 图 像 移动 到 场景 中 。 最 后 ， 锁 
定 图 层 1。 


o 


bE 
居 


Hour: 


证 滞 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


wi 编辑 第 25 帧 


在 图 层 1 的 第 25 帧 插入 关键 帧 。 

2. 在 图 层 2 的 第 25 帧 插入 空白 关键 帧 。 从 “ 库 ” 
面板 中 将 “鸭子 .png” 图 像 移动 到 场景 中 ， 
并 使 用 “变形 ”面板 ， 将 鸭子 图 像 放 大 到 和 
之 前 狗 图 像 一 样 的 大 小 。 


E 挨个 如 | ie 
亲 为 使 鸭子 图 像 和 之 前 的 狗 图 像 位 于 | 
| 同一 位 置 ， 在 将 鸭子 图 像 放大 后 ， 最 好 打开 给 ， 
,图 纸 外 观 功能 调整 网 子 图 像 的 位 置 。 | 


本 丁丁 tj 症 补 间 形 状 动画 

使 用 前 面 的 方法 ， 将 “鸭子 "图形 转换 为 矢量 图 。 
选择 图 层 2 的 第 1~25 帧 ， 单 击 鼠标 右键 ， 在 弹 
出 的 快捷 菜单 中 选择 “创建 补 间 形 状 ”命令 。 


全 3 
放 在 制作 字 休 、 数 字 变 形 的 动画 时 ， 


Ue ke 一 定 要 先 将 字体 、 数 字 分 离 。 


mit 
按 Ctrl+Enter 组 合 键 ， 测 试 动画 ， 可 见 随 着 播放 
的 进行 ， 狗 图 像 将 变 为 鸭子 图 像 。 


| 经 验 一 筹 仍 一 一 使 用 形状 提示 


使 用 补 间 形 状 动画 为 形状 变形 ， 不 一 定 能 得 到 满意 的 效果 。 若 要 控制 更 加 复杂 的 形状 变化 ， 可 以 
使 用 形状 提示 。 形 状 提示 会 标识 起 始 形状 和 结束 形状 中 的 相对 应 的 点 ， 可 用 a~z 的 字母 进行 形状 
标识 。 添 加 形状 提示 的 方法 是 : 选择 需要 添加 开始 形状 提示 的 帧 ， 选 择 【修改 〗/【 形 状 〗/【 添 
加 形状 提示 了 命令 ， 此 时 将 出 现 红 色 “ 提 示 a”.。 将 提示 a 移动 到 要 标记 的 位 置 。 执 行 相同 的 命令 
添加 红色 “提示 b” 移 动 到 要 标记 位 置 。 选 择 需 要 添加 结束 形状 提示 的 帧 ， 单 击 第 20 帧 ， 将 绿 
色 提 示 a 移动 到 与 第 1 帧 a 对 应 b 的 位 置 。 将 绿色 提示 b 移动 到 与 第 1 帧 b 对 应 的 位 置 。 


7:14 a aa 
补 间 动 画 是 通过 为 一 

一 个 值 创 建 的 动 

被 创建 。 


帧 中 的 对 象 属性 指定 一 个 值 并 为 另 
画 。 mo 制作 补 间 动 画 的 对 象 必须 是 元 


制作 网 页 简单 动画 


一 个 帧 中 的 该 相同 属性 指定 另 
件 ， 如 果 对 象 是 图 像 则 不 能 


本 例 将 新 建文 档 ， 导 入 素材 ， 并 使 


EP 新 建 影片 剪辑 元 件 


相同 的 方法 ， 将 剩 下 的 图 像 都 转换 为 医 
0 

2. 再 选择 【 插入 】/【 新 建 元 件 ] 命令 , 打开 “ 包 
建新 元 件 ” 对 话 框 , 在 其 中 设置 “名 称 、 类 型 " 
为 “2 动画 、 影 片 剪 辑 ”。 

3 单 击 EEEaE9 按 钮 。 


素材 制作 一 个 文本 浮现 的 效果 ， 其 具体 操作 如 下 : 


新 建 一 个 “1000x700 像素 ”、 颜 色 为 “ 灰 1 

(#666666 ) ”的 空白 动画 文档 , 将 “文本 浮现 " 

文件 夹 中 的 所 有 图 像 导 入 到 “ 库 ” 面 板 中 。 207 
72 口 


| 本 制作 方便 一 般 会 把 需要 制作 补 | 
间 动 的 素材 先 转换 为 因 形 元 件 ， | 


ee Ce 62 € 
Hour: 
未 
wn 新 建 图 形 元 伯 


选择 【 插入 】/【 新 建 元 件 】 命令 ， 打 开 “ 创 
建新 元 件 ” 对 话 框 , 在 其 中 设置 “名 称 、 类 型 ” 


为 "2、 图 形 " 。 po 
2， 单 击 EEEE 可 按钮 ， 进 入 元 件 编辑 窗口 。 ^ 
3 从 “ 库 " 面板 中 将 “2” 图 形 移动 到 场景 中 


o 


32 < 
Hour: 
人 


Hour: 


72 小 时 精通 上 直送 间 Lo 


Te lp pl ies nr 世 


7 
Hours 
一 一 一 一 


m2 
[2 


[CR 有 ED] 


?页 


1 
. 选择 [ 窗口 ]/ 属性 ] 命 令 , 打开 “属性 " 面板。 


2 


和 


STEP 04， 
从 “ 库 ” 面 板 中 将 “2” 元 件 拖 动 到 场景 中 。 


展开 “色彩 效果 " 栏 , 设置 “Alpha" 为 “0%" 。 
在 "时 间 轴 "面板 中 选择 第 1 帧 单 击 鼠 标 右键 ， 
在 弹出 的 快捷 菜单 中 选择 “创建 补 间 动 画 ” 
命令 ， 在 第 1~24 帧 创建 补 问 动画 。 


全 从 得 
的 二 【插入 ]/【 补 间 动 画 了 命令 ， 
也 可 创建 补 间 动 画 。 


STEP 05: 


选择 第 25 帧 ， 按 F6 键 ， 插 入 关键 帧 。 

选择 "2" 元 件 , 在 “属性 " 面板 中 设置 “Alpha" 
为 “100%”。 

按 住 Shift 键 的 同时 ， 将 元 件 向 上 移动 ， 制 作 
水 平 向 上 浮动 的 效果 。 此 时 ， 元 件 的 移动 轨 
迹 将 以 绿色 线条 出 现 。 


[EE ETS TT TA 


在 制作 补 间 动 画 时 ， 单 纯 地 水 平移 动 或 垂直 移动 可 能 不 能 满足 动画 效果 的 要 求 。 此 时 ， 用 户 可 以 
通过 编辑 元 件 运动 的 轨迹 丰富 动画 效果 。 编 辑 元 件 运动 轨迹 的 方法 是 : 选择 “选择 工具 ”N， 
将 鼠标 移动 到 运动 轨迹 上 拖 动 ， 即 可 编辑 元 件 运动 轨迹 ， 如 下 图 所 示 。 


SITERI06 制作 其 他 影片 剪辑 元 件 

使 用 相同 的 方法 ,创建 “0 动画 ”、“1 动画 ”、 
“4 动画 ”影片 剪辑 。 将 “0 动画 ”的 补 间 动 画 设 
置 为 第 1 帧 ~15 帧 ， 将 “1 动画 ”的 补 间 动 画 设 
置 为 第 1 帧 ~23 帧 ， 将 “4 动画 ”的 补 间 动 画 设 
置 为 第 1 帧 ~30 帧 。 返 回 场景 1。 


: 娄 , 

名 个 醒 
在 制作 “1 动画 ”时 ， 为 其 创建 补 间 

动画 后 ， 可 先 在 第 23 帧 插入 属性 关键 帧 ， 再 

将 多 余 的 帧 删除 。 


SNERO7E 应 用 元 件 

1， 从 “ 库 ” 面 板 中 ， 依 次 将 "2 动画 ”、“0 动 
画 ”、“1 动画 ”和 "4 动画 ”元 件 移动 到 场 
景 下 方 排列 。 

2， 在 "时 间 轴 "面板 中 设置 " 帧 速率 "为 "12.00" 。 


.类 艺 


人 
刘 。 将 “2 动画 ”、“0 动 画 ”、“1 动画 ”、 


“4 动画” 元件 移动 到 场景 时 , 需要 将 它们 缩小 。 
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STEPI08 和 全 测试 动画 
按 Ctrl+Enter 组 合 键 ， 测 试 动画 ， 即 可 看 到 数字 
不 断 地 在 动画 中 浮现 出 来 。 


上 1 经 验 一 筹 乱 一 一 设置 补 间 动 画 


用 户 除了 可 对 补 间 动画 的 运动 路 径 进行 编辑 外 ， 还 可 对 补 间 动 画 的 旋转 方式 、 运 动 速度 等 进行 
设置 。 其 方法 是 : 在 时 间 轴 上 选择 需要 设置 的 补 间 动 画 ， 在 “属性 ”面板 中 进行 设置 。 选 择 补 


间 动 画 后 ， 


“属性 ”面板 如 右 图 所 示 ， 其 中 各 参数 作用 如 下 。 
户 缓 动 : 用 于 设置 动画 运动 的 速率 。 当 数值 为 0 时 ， 表 示 正 常 运动 ; ”车 


为 负 值 时 ， 将 先 慢 后 快 的 运动 ; 为 正 值 时 ， 将 先 快 后 慢 的 运动 。 国 险 


个 旋转 : 用 于 设置 动画 中 元 件 对 象 在 运动 过 程 中 的 旋转 次 数 ， 数 字 jg 


越 大 旋转 速度 越 快 。 


所 方向: 用 于 设置 动画 中 元 件 对 象 在 运动 过 程 中 的 旋转 方向 。 
/回调 训 同和 复 选 框 : 选中 该 复 选 框 ， 元 件 将 跟随 着 运动 路 径 的 方向 “上 村 


调整 运动 方向 。 


:€ 
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7.1.5 创建 传统 补 间 动 画 


Flash 中 的 传统 补 间 动 画 与 补 间 动 画 类 似 ， 但 在 某 种 程度 上 ， 其 创建 过 程 更 为 复杂 ， 也 不 
那么 灵活 。 不 过 ， 传 统 补 间 所 具有 的 某 些 类 型 的 动画 控制 功能 是 补 间 动画 所 不 具备 的 。 动 画 中 
的 变化 是 在 关键 帧 中 定义 的 ， 在 补 间 动 画 中 ， 可 以 在 动画 的 重要 位 置 定义 关键 帧 ，Flash 会 
行 创建 关键 帧 之 间 的 帧 内 容 。 补 间 动 画 的 插 补 帧 显示 为 浅 蓝 色 或 浅 绿色 ， 并 会 在 关键 帧 之 | 

一 个 箭头 。 

本 例 将 使 用 传统 补 间 动 画 制 作 一 个 文字 下 降 后 ， 从 树木 上 掉 落 下 一 个 形状 的 效果 ， 其 具体 
操作 如 下 : 


ml 


a 导入 素材 


新 建 一 个 1000 x 729 像素 的 空白 动画 文档 , 将 " 树 
木 "文件 夹 中 的 所 有 图 像 导入 至 " 库 "面板 中 。 将 " 背 
景 .png” 图 像 移动 场景 中 ， 并 锁定 图 层 1。 


站 在 使 用 传统 补 间 动 画 制 作 动 画 时 ， 
| ,用 户 并 不 需要 将 因 像 对 象 转 换 为 元 件 。 | 


EE 创建 传统 补 间 动画 


在 图 层 1 的 第 50 帧 插入 关键 帧 ， 新 建 图 层 2。 

2. 从 “ 库 ” 面 板 中 将 “文字 .png” 图 像 移动 到 
场景 的 上 方 ， 并 将 其 缩小 。 

3. 选择 图 层 2 的 第 24 帧 ， 插 入 关键 帧 。 

4. 使 用 “选择 工具 ” 国 将 “文字 .png” 图 像 移 
动 到 场景 中 间 。 选 择 第 1 帧 ~ 第 24 帧 ， 单 击 
鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “创建 
传统 补 间 ”命令 。 在 第 1 帧 ~ 第 24 帧 ， 创 建 
传统 补 间 动 画 。 


Ta wp ter ot | 


制作 网 页 简单 动画 上 


AGE 最 绘制 形状 

1， 在 “时 间 轴 ” 面板 中 单 击 可 按钮 ,新建 图 层 3。 

2。 选择 "本 图 工具" 回 , 在 * 属 性" 面板 中 设置 " 笔 
触 颜色 填充 颜 色 " 为 "无 、 红 色 ( #FF3300 ) ， 
设置 “Alpha” 为 “50%”。 

3。 使 用 鼠标 在 场景 中 绘制 一 个 透明 的 正 国 。 


本 本 | 寻 第 1 段 传统 补 问 动画 Pe 


1.， 在 第 25 帧 上 插入 关键 帧 。 
2. 在 第 35 帧 上 插入 关键 帧 , 使 用 "选择 工具 " 加 72 口 
将 绘制 的 正 圆 移动 到 图 像 中 的 地 面 上 ， 并 将 
其 缩小 。 选 择 第 25 帧 ~ 第 35 帧 ， 单 击 鼠 标 
右键 ， 在 弹出 的 在 弹出 的 快捷 菜单 中 选择 “ 创 
建 传统 补 间 动 画 ”命令 。 


丁丁 而。 设置 传统 补 间 动 画 

1， 在 “时 间 轴 ”面板 中 ， 选 择 刚刚 创建 传统 补 人 
间 动 画 的 任意 帧 个 

2， 在 “属性 ”面板 中 设置 “ 缓 动 ”为 “100”， 
并 选中 国有 复 选 框 。 


设置 “组 动 ”为 正 数 可 以 减 慢 传 纺 | 
动画 的 运动 速度。 设置“ 组 动 ”为 负数 则 | 
- 


32 
wi 创建 第 2 段 传统 补 间 动 画 “人 
在 第 50 帧 插入 关键 帧 ， 移 动 圆 形 ， 并 将 其 | 
放大 。 
2， 选择 第 50 帧 ,在 “属性 ”面板 中 设置 “ 缓 动 " 
| 


Hour: 
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mt 
按 Ctrl+Enter 组 合 键 ， 测 试 动画 。 即 可 看 到 在 文 
本 下 移 后 ， 圆 形 开 始 落 到 地 上 并 弹 起 来 。 


7.1.6 创建 引导 层 动画 


引导 动画 是 在 传统 补 间 动 画 中 绘制 运动 路 径 ， 它 可 以 使 动画 对 象 沿 


引导 动画 必须 具备 两 个 条 件 : 一 是 路 径 ， 二 是 在 路 径 上 运动 的 对 象 。 


指定 的 路 径 运 动 ， 
ee 
象 运动 ， 引 导 路 径 都 是 通过 静态 线条 完成 的 ， 且 在 播放 动画 时 路 径 线 条 不 会 显示 。 


本 例 将 使 用 引导 层 动画 制作 文字 运动 效果 ， 使 文字 沿 着 一 条 路 径 运 行 ， 其 具体 操作 如 下 : 


机 和 a 


新 建 一 个 大 小 为 1000 x 656 像素 的 空白 动画 文档 ， 
将 “等 待 界面 jpg” 图 像 导 入 到 场景 中 ， 并 锁定 
图 层 1。 


wi 创建 引导 图 层 而 菠 龟 ， 忆 上 为 起 力 吉 -| QW 


四 


层 2， 选 择 “ 文 本 工具 ” 国 ， 设 置 “ 字 
ee 为 “方正 卡通 简体 、40 点 、 
白色 ( 放 FFFFF ) ”， 在 图 层 2 中 输入 文本 。 

2.， 在 图 层 2 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜 
单 中 选择 “添加 传统 运动 引导 层 ”命令 ， 创 
建 引导 层 。 在 引导 层 上 ， 使 用 “钢笔 工具 ”应 
绘制 一 条 引导 曲线 。 为 了 方便 后 面 放置 文本 ， 
绘制 的 引导 线 应 该 在 操作 场景 区 域 。 
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2 


1. 选择 文本 , 按 CtritB 组 合 键 分 离 文 字 为 对 象 。 
2. 选择 [ 修改 ]/[ 时 间 轴 】/[【 分 散 到 图 层 ] 命令 ， 
将 文字 对 象 分 散 到 各 个 图 层 。 


籽 Fm 冰 太吉 


1) 分离) 


测 aaaaaaaaaa 司 


WE 


区 ss 
如 果 不 将 文本 分 散 到 各 图 层 ，Flash | 
错 。 ! 


本 本 而。 创建 传统 补 问 

1.， 按 住 Shift 键 ， 选 择 所 有 图 层 的 第 60 帧 ， 按 
F6 键 插入 关键 由 

2.， 选择 “ 别 ” 图 层 ~“。” 图 层 的 1~60 帧 ， 分 
别 为 它们 创建 传统 补 间 。 


二 让 交 例 

1. 将 文本 图 层 中 的 第 1 帧 文字 对 象 拖 放 到 引导 
线 右 端 紧 贴 。 

2. 将 文本 图 层 中 的 第 65 帧 文字 对 象 拖 放 到 引导 

线 左 端 紧 贴 。 
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AGE 遇 。 设置 动画 属性 


ph 文本 图 层 中 的 补 间 动画 区 域 。 


1. 选中 
2.， 在 “属性 ”面板 中 ， 选 中 加 二 甸 复 选 框 。 
3. 在 "面板 中 , 设置 " 帧 率 "为 "12.00fps"。 


| 居间 lpm lc on a 


its 
按 Ctr+Enter 组 合 键 ， 测 试 动画 
字 跟 随 着 绘制 的 路 径 运 动 。 


地 
= 


了 
[ 芹 辕 
D 村 要 
舞动: 0 EL# 
二 [有 选中 
区 出 有 
出 同步 过 编 让 
Ds 
,ee 本 
用 二 个 于 坟 本 图 属 中 的 各 | 


We 再 设置 “属性 ” 面 


< 


一 个 表示 运动 程度 随时 间 而 变 


垂直 轴 表示 变化 的 百分比 。 第 
一 个 关键 帧 表示 为 0%， 最 后 
一 个 关键 帧 表示 为 100%。 图 
形 曲 线 的 斜率 表示 对 象 的 变化 
速率 。 曲 线 水 平时 ， 变 化 速率 
为 零 ， 曲线 垂直 时 ， 变 化 速率 
最 大 ， 即 完成 变化 。 


Er 


EN ] 


化 的 坐标 图 。 水 平 轴 表 示 帧 ， 到 er 


癌 : 在 为 元 件 编辑 缓 动 时 ， 能 不 能 根据 动画 的 剧情 ， 自 定义 缓 动 效果 呢 ? 
答 : 可 以 , 想 要 自 定义 编辑 缓 动 效 果 , 只 需 在 补 间 的 “属性 ”面板 中 单 击 “ 编 
辑 缓 动 ” 按 钮 国 ， 打 开 “ 自 定义 缓 入 / 缓 出 ”对 话 框 。 该 对 话 框 中 显示 了 


了 ] 世 为 新 有 展 社 基 凡 一 种 设 守 0] 


3 EE 


1 经 验 一 筹 能 一 一 引导 动画 的 修改 技巧 


传统 引导 动画 主要 是 将 运动 对 象 图 层 放 到 引导 图 层 上 ， 并 在 引导 图 层 上 绘制 所 需 的 路 径 ， 补 间 
动画 中 可 以 在 对 象 运动 图 层 上 调整 补 间 线 条 更 改 对 象 的 运动 路 径 。 


7.1.7 创建 遮 罩 动画 


制作 网 页 简单 动画 


遍 淖 动画 由 庶 曾 层 和 被 遮 淖 层 构 成 ， 它 主要 通过 遮 淖 层 中 对 象 的 形状 、 大 小 和 位 置 来 实现 


对 被 遮 罩 对 象 的 显示 范围 进行 控制 。 遮 罩 项 


剪辑 。 


UH 


可 以 是 填充 的 形状 、 文 字 对 象 、 图 形 元 件 和 影 


本 例 将 使 用 遮 罩 动 画 ， 制 作 一 个 平板 电脑 闪烁 光泽 的 效果 ， 其 具体 操作 如 下 : 


. 新建 一 个 大 小 为 800 x 500 像素 的 空白 文档 ， 
选择 【插入 】/【 新 建 元 件 ] 命令 ， 打 开 “ 创 
建新 元 件 ” 对话 框 , 设置 “名 称 、 类 型 " 为 “ 平 


板 电脑 1、 影 片 剪 辑 ”。 
2， 单 击 EEEE 可 按钮。 


本 可: 添加 素材 


不 


按 Ctrl+R 组 合 键 ， 打开“ 导入 ”对 话 框 ， 在 
其 中 选择 导入 “平板 电脑 1.png” 图 像 。 使 
用 “任意 变形 工具 ” 跨 将 导入 的 图 像 缩小 。 
在 “时 间 轴 ”面板 中 单 击 “ 新 建 图 层 ” 按 
钮 名， 新 建 图 层 2。 


二 


1. 


选择 【 窗口 ] /【 颜色 】 命 令 , 打开 “颜色 ” 
面板 。 在 “颜色 类 型 " 下 拉 列 表 框 中 选择 " 线 
性 渐变 ”选项 。 

设置 “颜色 ”都 为 “白色 (#FFFFFF ) ”， 
再 设置 “Alpha” 分别 为 “0%、80%、 
100%、0%”。 

使 用 “和 拢 形 工具 ” 回 ， 在 场景 上 绘制 一 个 
和 珑 形 。 


LE 
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Hour 
人 


证 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


TD 旋转 图 形 


使 用 “任意 变形 工具 ”了 天， 将 绘制 的 形状 进 
行 旋 转 ， 并 变 成 为 矩形 。 
2. 在 图 层 1、 图 层 2 的 第 25 帧 插入 关键 帧 。 
3.， 使 用 “选择 工具 ” 圈 将 绘制 的 矩形 移动 到 对 


在 移动 短 形 时 ， 下 一 步 制作 的 补 间 | 
矩形 的 移动 范围 将 完全 覆盖 到 整个 平板 | 
| 


er 创建 庶 别 动画 


择 图 层 2 的 第 1 帧 ~ 第 25 帧 。 

。 oe 使 用 “钢笔 工具 ”项 沿 着 平板 电 
脑 图 像 的 边缘 ， 绘 制 一 个 矩形 。 

3， 在 图 层 3 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜 
单 中 选择 “ 庶 曾 层 ” 命 令 。 


剪辑 应 用 于 主场 景 后 ， 延 长 出 平板 电脑 的 部 分 
,不 被 显示 ， 从 而 使 背景 变 得 干净 。 


“要 
为 元 件 添加 这 村 图 层 是 为 了 将 影片 


TR Uy yy ter BO 到 


制作 网 页 简单 动画 


丁丁 十 奸 元 件 

1， 选择 【 插入 】/【 新 建 元 件 】 命令 ,打开 “ 创 
建新 元 件 ”对 话 框 , 在 其 中 设置 “名 称 、 类 型 ” 
为 “平板 电脑 2、 影 片 剪 辑 ”。 

2.， 单 击 匡 如 加 按 钮 。 


ne 编辑 元 件 


“平板 电脑 2.png” 图 像 ， 使 用 制作 “ 平 
be 元 件 的 方法 制作 "平板 电脑 2" 元 件 。 
2.， 在 图 层 1、 图 层 2、 图 层 3 的 第 70 帧 插入 关 


键 帧 
3。 新 建 图 层 4， 并 在 第 70 帧 插入 关键 帧 一 -一 
217 
72 口 
Pd = 二 ER Hours 
Pm 将 图 像 转换 为 元 件 
择 图 层 4 的 第 70 帧 。 将 “操作 笔 1.png” 
ee 景 中 ， 并 将 其 缩小 。 “@ 
2， 按 F8 键 ， 打开“ 转换 为 元 件 ” 对 话 框 。 在 其 
中 设置 “名 称 、 类 型 " 为 “操作 笔 1、 图 形 " 。 
3， 单 击 EEEE 按 钮 ， 将 图 像 转换 为 元 件 。 
全 元 作 3)) 单 击 至 A 52 
图 让 小 
tm [ER S88 可 轿 层 1 | 
(2 有 设置 ) (aaa Ta yh ei 疝 让 克 各 


42 
AGE 二 设置 元 件 透 明度 “ 
1. 选中 刚刚 转换 的 元 件 。 
2， 选择 [ 窗口 ]/[ 属性 ] 命 令 , 打开 “属性 " 面板 ， 
展开 “色彩 效果 ” 栏 ， 设 置 “ 样 式 、Alpha” 
为 “Alpha、10%”， 为 元 件 设置 透明 度 。 


在 “颜色 效果 ” 栏 中 ， 先 将 “样式 ” 
设置 为 “Alpha” 后 ， 才 会 出 现 “Alpha” 数值 框 。 ， 


En 


BBE, 
] 
4 
3 
1 
1 
4 


一 敌 售 一 一 用 命令 创建 遮 淖 层 a 


选择 【修改 〗 /【 时 间 轴 ]】/【 图 层 属性 】 命 令 ， 打 开 “ 图 层 属性 ”对 话 框 ， 在 其 中 选中 [四 这 妇 良 0 
单 选 按 钮 即 可 创建 计 单 层 。 


有 六 吉庆 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


本 本 ”I 奸 传 统 补 间 动 画 

1 在 第 78 帧 插入 关键 帧 ,选择 "操作 笔 1" 元 件 。 
在 "属性 " 面板 中 , 设置 “Alpha" 为 “100%”。 

2， 选 择 第 70 帧 ~ 第 78 帧 ， 单 击 鼠标 右键 ， 在 
弹出 的 快捷 菜单 中 选择 "创建 传统 补 间 " 命令， 
为 第 70 帧 ~ 第 78 帧 创建 传统 补 问 动画 。 


号 A 
| BE 在 本 步 派 加 传统 补 问 动画 后 图像 
| 将 出 现 浙 现 的 效果 ， | 


机 二 “操作 笔 2" 元件 

1.， 新 建 图 层 5， 在 第 78 帧 插入 关键 帧 。 将 “ 操 
作 笔 2.png" 图 像 导 入 到 舞台 中 。 使 用 编辑 " 操 
作 笔 1” 元 件 的 方法 ， 编 辑 “ 操 作 笔 2 ”图像 。 

2. 选择 图 层 1、 图 层 2、 图 层 3 和 图 层 4 的 第 85 帧 ， 
插入 关键 由。 


1.， 返回 场景 1， 使 用 鼠标 单 击 文档 空白 处 。 在 
“属性 ”面板 中 设置 “背景 颜色 ”为 “黄色 
(#FFCC00 ) ”。 在 第 5 帧 插入 关键 帧 。 

2.， 选 择 "文本 工具 " 国 , 在 “属性 " 面板 中 设置 " 系 
列 、 大 小 、 颜 色 " 为 “方正 综艺 简体 、40.0 点 、 
黑色 (#000000) ”。 

. 使 用 鼠标 在 场景 下 方 输入 文本 。 


AGED 时 为 文本 添加 波 镜 

1. 选择 输入 的 文本 。 

2 在 "属性 " 面板 中 展开 * 滤 镜 " 栏 , 单 击 名 按 包 。 
在 弹出 的 下 拉 列 表 中 选择 “模糊 ”选项 。 

3， 在 “属性 "选项 栏 中 设置 “模糊 X、 模 糊 Y 
都 为 “120 像素 " 。 


Lia ly ppl He Ti 下 一 豆 可 侣 -as 


本 二 用 元 件 

1， 在 第 36 帧 插入 空白 关键 帧 。 从 “ 库 ”面板 中 
将 “平板 电脑 2” 影 片 剪 辑 拖 动 到 场景 中 ， 并 
将 其 缩小 。 

2. 选择 第 125 帧 ， 按 F5 键 插入 帧 。 


和 


1. 新 建 图 层 3， 在 第 50 帧 插入 关键 帧 。 

2 选择 "文本 工具 " 国 , 在 "属性 "面板 中 设置 " 文 
本 引擎 ”为 “TLF 文本 ”。 

鼠标 在 场景 上 方 输入 文本 。 


| 


人 四 
将 文本 的 文本 引擎 设置 为 “TIF 文 本 >，| | 
是 为 了 在 后 面 的 操作 中 设置 文本 的 透明 度 。 | 


制作 网 页 简单 动画 


wa 为 文本 添加 传统 补 间 动 画 


在 第 15 帧 插入 关键 帧 ， 选 择 输入 为 文本 。 
2.， 在 “属性 ”面板 的 “属性 ” 栏 中 设置 “模糊 X、 
模糊 Y” 都 为 “0 像素 ”。 
3. 选择 第 5 帧 ~ 第 15 帧 ， 单 击 鼠 标 右键 ， 在 弹 
出 的 快捷 菜单 中 选择 “创建 传统 补 间 动画 " 
命令 , 为 第 5 帧 ~ 第 15 帧 创建 传统 补 间 动 画 。 


ft 

1. 新建 图 层 2， 在 第 15 帧 插入 关键 帧 。 

2. 从 “ 库 ” 面 板 中 ,将 “平板 电脑 1” 影片 剪辑 
拖 动 到 场景 中 并 将 其 缩小 。 选 择 第 35 帧 ， 按 
F5 键 插入 帧 。 


| 在 第 35 帧 中 插入 帧 ， 是 为 了 使 “ 平 | 
| 板 电脑 1? 影 片 剪 辑 能 在 播放 动画 时 完整 地 播放 。 | 
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从 
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AGE 二 设置 文本 透明 度 


和 
和 


选择 输入 的 文本 。 


在 “属性 " 面板 了 


tb 


置 “Alpha” 为 " 


展开 "色彩 效果 " 栏 , 设置 " 样 
式 、Alpha” 为 "Alpha、5%”。 
在 第 90 帧 插入 关键 帧 ， 在 “属性 ” 
“100%"”。 


面板 中 设 


本 二 入 文本 

1， 选择 第 50 帧 ~ 第 90 帧 ， 插 入 传统 补 间 动 画 。 

2.， 选 择 第 91 帧 ， 按 F7 键 ， 插 入 空白 关键 帧 。 

3， 使 用 “文本 工具 ” 峡 在 之 前 输入 的 文本 后 方 答 
入 新 的 文本 , 并 在 “属性 " 面板 中 设置 Alpha' 
为 “5%”。 


本 本 而 设置 文本 透明 度 

1.， 选择 第 125 帧 ， 按 F6 键 插入 关键 帧 。 

2， 选 择 输入 的 文本 ， 在 “属性 ”面板 中 设置 
“Alpha” 为 “100%”。 


Ee] 吉 个 本 ED -1 
| 由 于 第 50 帧 ~ 第 90 帧 已 经 创建 了 | 

| 传统 补 间 动 画 。 所 以 在 第 91 帧 ~ 第 125 帧 之 | 
| | 间 Flash 将 会 自行 创建 传统 补 间 动 画 。 | 


制作 网 页 简单 动画 


1 测试 动画 


按 Ctrl+Enter 组 合 键 ， 测 试 动画 。 


厦 目 四 JE 创建 “地 图 ”动画 


巩固 创建 补 间 动画 以 及 引导 图 层 动画 的 操作 。 


1 进一步 掌握 使 用 动画 编辑 器 编辑 动画 。 山 | 


本 例 将 创建 “地 图 ”动画 ， 制 作 汽车 在 地 图 中 行驶 的 动画 效果 。 制 作 时 将 为 实例 创建 补 间 
动画 和 引导 图 层 动画 ， 最 后 使 用 动画 编辑 器 对 动画 进行 编辑 ， 其 最 终 效果 如 下 图 所 示 。 


加 


将 “地 图 ”文件 来 


面板 中 。 从 “ 库 ” 面 板 中 将 


动 到 场景 中 ， 将 其 作为 背景 图 


新 建 一 个 尺寸 为 886 x 496 像素 的 空白 动画 文档 。 
2 的 所 有 图 像 都 导入 到 “ 库 ” 
“背景 .png” 


像 。 


图 像 移 


二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


if 
FF 
1.， 选择 【插入 】/ 【新建 元 件 】 命 令 ,， 打开 “ 创 Er 
建新 元 件 ” 对 话 框 ,在 其 中 设置 “名称 、 类 型 " 
为 "车 1、 图 形 ”。 的 
2， 单 击 已 本 按钮 ， 进 入 元 件 编辑 窗口 。 ES | 于 一 
3， 从 “ 库 " 面板 中 将 “车 1png” 图 像 移动 到 声 [we i 
景 中 。 BD | 
ae 击 
ET CJ 一 | 
mm [LE 
(17 设置 ) 


丁丁 创建 其 他 元 件 


使 用 相同 的 方法 ， 将 其 他 交通 工具 图 像 都 转换 为 
图 形 元 件 。 


EE 创建 补 间 动画 


返回 场景 1， 锁定 图 层 1。 

2. 新 建 图 层 2， 从 “ 库 ” 面 板 中 将 “车 1" 元件 
移动 到 场景 中 。 

3. 选中 “车 1" 元 件 , 选择 [ 窗口 ]/[ 变形 ] 命令 ， 
打开 “变形 " 面板 , 设置 “缩放 高 度 、 缩 放宽 度 ” 

分 别 为 “30.0%”。 


WE 创建 补 间 动 画 


在 图 层 的 第 100 帧 插入 关键 帧 。 在 图 层 2 的 
第 1 帧 上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 
中 选择 “创建 补 间 动 画 " 命令, 创建 补 间 动 画 。 
选择 图 层 2 的 第 70 帧 ， 按 F6 键 ， 在 图 层 2 
的 第 70 帧 插入 属性 关键 帧 。 

2. 使 用 “移动 工具 ” 国 , 将 “车 1” 元 件 移动 到 
公路 前 方 。 此 时 ， 在 场景 中 将 会 出 现 紫 色 的 
运动 路 径 。 


ms 应 用 元 件 


建 图 层 3， 在 第 50 帧 插入 关键 帧 。 

2 上 “ 库 ” 面 板 中 ， 将 “车 3” 元 件 移动 到 场景 

中 ， 并 通过 “缩放 ”面板 将 其 缩小 。 

3. 在 第 50 帧 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜 
单 中 选择 “创建 补 问 动 画 ”命令 ， 创 建 补 间 
动画 。 


制作 旋转 动画 


在 第 85 帧 插入 属性 关键 帧 ,使 用 "移动 工具 " 园 
将 “车 2” 元 件 移动 到 公路 前 方 。 
2. 在 第 86 帧 插入 关键 帧 。 选 择 元 件 ， 在 “变形 ” 
面板 中 设置 “旋转 ”为 “-26.0%”。 
3. 在 第 87 帧 插入 关键 帧 。 选 择 元 件 ， 在 “变形 ” 
面板 中 设置 “旋转 ”角度 为 “-55.0%”， 并 
“移动 工具 ” 国 轻 轻 向 左 移动 元 件 。 


本 本 本 ff 第 2 段 运动 动画 


1. 新 建 图 层 4， 在 第 88 帧 插入 空白 关键 帧 。 

2. 单 击 硬 按钮 ， 打 开 绘 图 纸 功能 。 

3. 从“ 库 ” 面板 中 将 “车 1” 元 件 移动 到 场景 中 ， 
并 将 其 缩小 ， 通 过 绘图 纸 功能 使 “车 1” 元 件 
和 “车 2” 元 件 的 运动 方向 一 致 。 在 第 88 帧 
上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 
"创建 补 间 动画 ”命令 。 

4. 在 第 100 帧 插入 属性 关键 帧 ， 使 用 “移动 工 

县 国 移 动 “ 元 件 。 


Hour: 


72 小 时 精通 


wi 移动 “车 2" 元 件 
在 第 55 帧 上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜 


单 中 选择 “创建 补 间 动 画 ” 命 令 , 创建 补 间 
动画 。 在 第 100 帧 插入 属性 关键 帧 。 


. 使 用 “移动 工具 ” 国 将 “车 2” 元 件 移动 到 公 


路 前 方 。 


ee 创建 运动 引导 层 


建 图 层 6， 从 “ 库 ” 面 板 中 将 “ 船 ”元 件 移 
ee 


在 图 层 6 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜 


单 中 选择 “添加 传统 运动 引导 层 ” 命 令 ， 创 
建 引 导 层 。 在 引导 层 上 ， 使 用 “钢笔 工具 ”应 
绘制 一 条 引导 曲线 。 


绑 定 实例 


在 图 层 6 的 第 100 帧 插入 关键 帧 ， 将 图 层 6 
中 的 第 1 帧 文字 对 象 拖 放 到 引导 线 上 端 紧 贴 。 


2: 将 图 层 6 中 的 第 100 帧 文字 对 象 拖 放 到 引导 


端 紧 贴 。 
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本 09: 新 建国 导 


层 5， 选 择 第 1 帧 。 
将 “车 2” 元 件 移动 到 场景 


3. 在 第 55 帧 中 插入 关键 帧 。 


Di oo mh 5 me 


目 
a ap ie om sy spn ti 


本 和 民 性 


选择 图 层 6 的 第 1 帧 ~ 第 100 帧 , 单 击 鼠 标 右键 ， 


在 弹出 的 快捷 菜单 


命令 ， 创 建 传统 补 间 动 画 。 在 “时 间 轴 ”上 单 击 


补 间 动 画 的 任意 帧 ， 


为 “20”， 选 中 国 测 生硬 复 选 框 。 
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hb 选 择 “ 创 建 传统 补 间 动 画 ” 


在 “属性 " 面板 中 设置 “ 缓 动 ” 


7.2 制作 多 媒体 Flash 动 画 


在 动画 里 加 入 声音 或 视频 ， 能 使 动画 更 加 44 


素材 


o| 


J ， 如 果 需 要 在 应 


缩 方式 以 及 对 实例 组 件 的 设置 方法 。 


因此 在 网 站 上 放 上 


合适 的 多 媒体 Flash 动画 ， 可 以 为 网 站 增色 不 少 。 


BEEEI>------ 


护 了 解 Flash 中 可 以 使 用 的 音频 和 视频 类 型 。 


1 S 掌握 导入 声 
I 


音 以 及 编辑 音频 的 操作 方法 。 


E 动 。 一 般 情况 下 只 需要 导入 合适 的 声音 和 视频 
中 对 这 些 素材 进行 适当 的 编辑 ， 就 应 该 掌握 音频 、 视 频 的 设置 和 压 


前 在 网 络 上 流行 的 动画 短片 、 MTV 和 动态 贺卡 等 Flash 作品 , 大 多 加 入 了 音频 或 者 视频 ， 


| 进一步 掌握 在 Flash 中 导入 视频 的 方法 。 | | 


7.2.1 在 Flash CS6 中 可 使 用 的 声音 类 型 


Flash 提供 多 种 使 用 声音 的 方式 ， 可 以 使 声音 独立 于 时 间 轴 连续 播放 ， 或 使 用 时 间 轴 将 动 
画 与 音 轨 保 持 同步 。 
在 Flash 中 虽然 能 使 用 声音 ， 但 并 不 是 所 有 的 声音 都 能 被 使 用 。Flash 中 可 使 用 的 声音 


件 格式 如 下 表 所 示 。 


WAV 格式 是 微软 公式 和 IBM 公司 共同 开发 的 PC 的 标准 声音 格式 。 


Flash 常 用 的 声音 文件 格式 


它 是 直接 保存 对 声音 


波形 的 采样 数据 ， 数 据 没有 经 过 压缩 ， 所 以 音质 很 好 ， 但 它 所 占 磁盘 空间 很 大 


MP3 是 大 家 熟知 的 一 种 数字 音频 格式 。 它 体积 小 、 传 输 方 便 和 拥有 较 好 的 声音 质量 ， 所 
以 现在 大 量 的 电脑 音乐 都 是 以 MP3 的 形式 出 现 的 
它 是 苹果 公司 开发 的 一 种 声音 文件 格式 ， 支 持 MAC 平台 ， 支 持 16bit 44.1kHz 立体 声 
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格 式 说 明 
SUN 公司 的 AU 压缩 声音 文件 格式 ， 只 支持 8bit 的 声音 ， 是 互联 网 上 常用 到 的 声音 文件 


格式 ， 多 由 SUN 工作 站 创建 
ASND 格式 是 Adobe Soundbooth 的 本 机 音频 文件 格式 ， 具 有 非 破坏 性 。ASND 文件 可 以 
包含 应 用 了 效果 的 音频 数据 ( 稍 后 可 对 效果 进行 修改 ) 、Soundbooth 多 轨道 会 话 和 快照 


上 经 验 一 筹 能 一 一 使 用 声音 的 常见 方法 


为 了 满足 不 同 动画 的 制作 需求 ，Flash 提供 多 种 使 用 声音 的 方式 ， 可 通过 如 下 方法 使 用 声音 : 


人 由 使 用 共享 库 将 声音 链接 到 多 个 文档 。 

各 使 用 ActionScript 3.0 根据 声音 的 完成 触发 事件 。 

由 使 用 预先 编写 的 行为 或 媒体 组 件 来 加 载 声音 和 控制 声音 回放 ; 后 者 (媒体 组 件 ) 还 提供 了 用 于 
停止 、 暂 停 和 后 退 等 动作 的 控制 器 。 

所 使 用 ActionScript 3.0 动态 加 载 声音 。 


7.2.2 ”导入 声音 


将 声音 文件 导入 到 当前 文档 的 库 ， 这 样 就 可 以 将 声音 文件 放 入 到 Flash 中 。 此 时 ， 声音 文 
件 将 以 副本 的 方式 在 文档 中 被 应 用 。 导 入 声音 的 方法 是 : 选择 【文件 】 /导入 】/ 【导入 到 库 】 
命令 , 在 打开 的 “导入 到 库 " 对 话 框 中 选择 音频 文件 , 单 击 EEe 昌 按钮 导入 文件 。 打 开 " 库 " 面板 ， 
可 以 像 查 看 元 件 一 样 查看 声音 文件 。 在 预览 窗口 中 单 击 ， 按 钮 可 播放 声音 。 

需要 注意 的 是 ， 当 需要 导入 的 声音 文件 比特 率 高 于 64kbps 时 ， 不 能 导入 到 Flash 中 。 


经 验 一 筹 能 一 一 使 用 “声音 ” 库 


Flash 包含 一 个 “声音 ” 库 ， 其 中 包含 可 用 作 效 果 的 多 种 声音 。 选择 【窗口 〗/【 公 用 库 】»/【 声 音 】 
命令 ,打开 “声音 ” 库 。 若 要 将 “声音 ” 库 中 的 某 种 声音 导入 FLA 文件 中 ， 可 以 将 此 声音 从 “ 声 
音 ” 库 中 拖 动 到 FLA 文件 的 “ 库 ” 面 板 。 


制作 网 页 简单 动画 
7.2.3 使 用 声音 


在 Flash 文档 中 使 用 声音 ， 可 以 从 “ 库 ” 面板 中 拖 入 声音 添加 至 文档 ,也 可 以 在 时 间 轴 “ 属 
性 ”面板 中 添加 声音 。 这 两 种 添加 方法 分 别 介绍 如 下 。 


但 使 用 “ 库 ” 面 板 : 将 声音 文件 导入 到 当前 ” 大 使 用 “属性 ”面板 : 将 声音 文件 导入 到 当 
文档 的 库 中 ， 选 择 【 插 入 】〗/【 时 间 轴 】〗/ 【图 前 文档 的 库 中 ， 在 “时 间 轴 ”面板 中 选择 要 
层 】 命 令 新 建 图 层 ， 选 定 新 建 的 声音 层 后 ， 包含 声音 文件 的 关键 帧 ， 打 开 “ 属 性 ”面板 ， 
将 声音 从 “ 库 ” 面 板 中 拖 到 场景 中 ， 声音 就 在 “属性 ” 栏 中 展开 声音 ， 从 “名 称 ” 下 拉 
会 添加 到 当前 层 中 。 列表 框 中 选择 声音 文件 。 


7.2.4 设置 音频 


在 时 间 轴 中 添加 声音 后 ， 用 户 可 以 对 播放 出 的 声音 效果 进行 设置 和 编辑 ， 如 设置 音量 、 播 
放 起 始点 和 播放 次 数 等 。 通 过 对 音频 的 设置 可 以 使 用 户 能 更 好 地 对 Flash 动画 的 效果 进行 控制 ， 
下 面 就 来 讲解 常用 的 设置 音频 的 方法 。 


1. 设置 声音 属性 


在 Flash 中 用 户 可 以 通过 两 种 方 
法 设置 声音 的 属性 ， 一 种 是 在 “ 库 ” | 
面板 中 ， 在 需要 设置 属性 的 音频 文件 had Petr ep 
上 单 击 委 标 右键 ， 在 弹出 的 快捷 荣 单 。 |WOWNAWMO | sts 
中 选择 “属性 ”命令 ， 打 开 如 右 图 所 ee 
示 的 “声音 属性 ”对 话 框 ， 另 一 种 是 
在 “ 库 ” 面 板 中 双击 音频 文件 前 的 感 
安 钮 ， 打 开 “ 声 音 属性 ”对 话 框 。 ER 
“声音 属性 ”对 话 框 中 各 选项 作 Wi 
介绍 如 下 。 rome 


办 “名 称 ” 文 本 框 : 用 于 显示 选中 音频 文件 的 名 称 ， 若 用 户 在 其 中 输入 新 的 名 称 ， 该 音频 文 
件 即 被 重 命名 。 

人 如 “压缩 ”下 拉 列 表 框 : 用 于 设置 音频 文件 在 Flash 中 的 压缩 格式 ， 用 户 可 以 根据 实际 情况 
选择 压缩 格式 ， 不 同 的 格式 压缩 强度 和 效果 都 有 所 不 同 。 


32 € 
Hour: 
人 


Hour: 
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人 ERG 本 按钮 : 单 击 该 按钮 ， 新 导入 的 文件 将 替换 原始 的 文件 。 被 替换 文件 名 不 会 被 修改 。 
人 [ERGa 按 钮 : 单 击 该 按钮 ， 该 音频 文件 将 被 播放 ， 以 方便 用 户 试听 音频 是 否 合适 。 
人 [EEEES9 按 钮 : 单 击 该 按钮 ， 正 在 测试 的 音频 将 停止 播放 。 


2. 将 声音 与 动画 同步 


在 制作 很 


动画 同步 ， 如 制作 产品 演示 广告 、 制 作 播 
放 器 等 。 若 要 将 声音 与 动画 同步 ， 则 需要 
， 其 方法 为 ， 导 入 声音 到 文 
档 中 ， 并 在 “时 间 轴 ”面板 中 添加 声音 ， 
在 声音 图 层 要 停止 播放 声音 处 插入 关键 帧 。 


进行 相应 设置 


选择 该 帧 ， 在 


多 Flash 动画 时 要 求 声 音 与 


“属性 ”面板 的 “声音 ” 栏 


下 选择 同 


止 播放 。 


声音 ， 在 “同步 ”下 拉 列 表 框 
中 选择 “停止 
放 SWF 文件 时 ， 声 音 会 在 结束 关键 帧 处 停 


”选项 ， 如 右 图 所 示 。 在 播 


| 


经 验 一 筹 翁 “同步 ”下 拉 列 表 框 中 各 选项 的 含义 


在 制作 Flash 时 ， 使 用 合适 的 “同步 ”选项 能 更 好 地 使 声音 为 Flash 动画 服务 。 该 下 拉 列 表 框 中 
各 选项 含义 如 下 。 
个 事件 : 该 选项 会 将 声音 和 一 个 事件 的 发 生 过 程 同步 起 来 。 事 件 声 音 在 显示 其 起 始 关 键 帧 时 
开始 播放 ， 并 独立 于 时 间 轴 完整 播放 ， 即 使 SWF 文件 停止 播放 也 会 继续 。 当 播放 发 布 的 
SWF 文件 时 ,事件 声音 会 混合 在 一 起 。 如 果 事件 声音 正在 播放 ,而 声音 再 次 被 实例 化 ( 例如 ， 
用 户 再 次 单 击 按钮 ) ， 则 第 一 个 声音 实例 继续 播放 ， 另 一 个 声音 实例 同时 开始 播放 。 
所 开始 : 该 选项 与 “事件 ”选项 的 功能 相近 , 但 如 果 声 音 已 经 在 播放 , 则 新 声音 实例 就 不 会 播放 。 
加 停止 : 该 选项 使 指定 的 声音 停止 播放 。 
公 数据 流 : 该 选项 将 同步 声音 ， 以 便 在 网 站 上 播放 。Flash 强制 动画 和 音频 流 同步 。 如 果 
Flash 不 能 足够 快 地 绘制 动画 的 帧 ， 它 就 会 跳 过 帧 。 与 事件 声音 不 同 ， 音 频 流 随 着 SWF 文 
件 的 停止 而 停止 ， 而且 音 频 流 的 播放 时 间 绝 对 不 会 比 帧 的 播放 时 间 长 。 当 发 布 SWF 文件 时 ， 
音频 流 混 合 在 一 起 。 


3. 设置 声音 重复 


默认 情况 下 ， 被 插入 到 动画 中 的 声音 只 会 = a 
播放 一 次 。 如 果 用 户 制作 的 动画 有 特殊 需要 ， 需 Ey 
要 循环 播放 或 者 播放 几 次 ， 如 制作 生日 贺卡 ， 可 ee 


通过 “属性 ”面板 进行 设置 。 设 置 声 音 重复 的 方 :LE E 
法 是 : 选中 添加 音频 文件 的 帧 ， 在 “属性 ”面板 mm 
的 “声音 循环 ”下 拉 列 表 框 中 选择 “重复 ”选项 ， :大 ee 
在 其 后 方 的 文本 框 中 输入 播放 次 数 ， 如 右 图 


所 示 。 2 


名 称 
类 型: 

产 者 
[的 限 神 .mpJ 
效果 : 
同步 
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一 筹 乱 一 一 设置 声音 循环 播放 
设置 声音 循环 ， 用 户 只 需 在 “属性 ”面板 的 “声音 循环 ”下 拉 列 表 框 中 选择 “循环 ”选项 即 可 。 


7.2.5 ”编辑 声音 

在 Flash 中 ， 除 了 可 对 导入 的 音频 进行 简单 的 设置 外 ， 还 可 以 对 音频 中 的 声音 进行 更 加 细 
致 的 编辑 。 如 定义 声音 的 起 始点 、 在 播放 时 控制 声音 的 音量 ， 还 可 以 改变 声音 开始 播放 和 停止 
播放 的 位 置 。 

本 例 将 打开 “照片 fla” 动画 文档 ， 编 辑 其 中 的 背景 音乐 文档 ， 修 改 音 量 并 将 不 需要 的 部 
分 减 去 ， 其 具体 操作 如 下 : 


.实例 演示 \ 第 7 章 \ 编辑 声 - 


GEE 0 靖 。 添加 声音 

1. 打开 “照片 fla” 动画 文档 ， 在 “时 间 轴 ” 面 
板 中 选中 图 层 2 的 第 1 帧 。 

2.， 选 择 [ 窗口 人 [ 属性 ] 命 令 , 打开 “属性 " 面板 ， 
在 其 中 单 击 现 按钮 。 


SEE Ss 本 


丁丁 设置 播放 起 始 位 置 

打开 “编辑 封套 ”对 话 框 ， 在 左边 标尺 处 ， 拖 动 
滑 条 调整 音频 的 起 点 位 置 。 将 对 话 框 下 方 的 滚动 
条 滑动 到 最 右边 显示 音频 的 终点 位 置 ， 使 用 相同 
的 方法 将 重点 标尺 移动 到 13.5 秒 的 位 置 。 


: 作 醒 a 
这 从 ,: “编辑 封套 ”对 话 框 下 方 的 国 | 
， 按 乌 可 试听 编辑 效果 ， 单 击 国 烷 包 可 终止 试听 | 


DO 
读书 笔记 


Hour: 
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丁丁 古 更改 声 音 播放 时 的 音量 

在 音频 波段 处 单 击 添加 几 个 封套 手柄 ， 分 别 调整 
手柄 位 置 ， 控 制 声音 播放 时 音量 的 大 小 。 向 上 即 
为 增 大 音量 ， 向 下 即 为 减 小 音量 。 


i 
| 在 对 话 框 中 标尺 以 上 为 左 声 道 ， 标 | 
| 尺 以 下 为 右 声 道 。 它 们 都 能 单独 设置 不 同 的 | 
! 音量 。 J 


1 经 验 一 筹 仍 


修改 “编辑 封套 ”对 话 框 视图 显示 


为 了 更 好 地 对 插入 的 长 音频 进行 调整 ， 用 户 


可 根据 实际 需要 调整 对 话 框 的 视图 显示 比例 ， 其 方 


法 是 单 击 对 话 框 右 下 方 的 4 个 按钮 。 这 4 个 按钮 作用 分 别 如 下 。 


辐 按钮 : 
辐 按钮 : 
图 按钮 : 
一 按钮 : 


本 丁丁 更 改 结束 播放 时 的 音量 

将 对 话 框 下 方 的 滚动 条 滑动 到 最 右边 显示 音频 的 
终点 位 置 , 在 音频 波段 处 单 击 添 加 几 个 封套 手柄 ， 
分 别 调整 手柄 位 置 ， 逐 渐 降 低 声 音 的 播放 。 单 
击 EEEE9 按 钮 。 


‘ep 


1 
| 需 按 住 需要 删除 的 封套 手柄 并 向 对 话 框 外 拖 | 


| 动 ， 即 可 删除 。 | 
ah 二 


机 本 设计 声音 循环 
在 “属性 ”面板 的 “同步 ”下 拉 列 表 框 中 选择 “ 数 
据 流 ”选项 。 


车 i 

将 同步 设置 为 数据 流 后 ， 图 像 播 放 
完成 后 ， 声 音 将 会 自动 停止 。 这 样 可 以 避免 声 
音 重 班 播放 的 情况 。 


本 人 醒 


用 于 放大 对 话 框 中 标尺 的 显示 比例 ， 方 便 用 户 更 细致 地 对 声音 进行 调整 。 
用 于 缩小 对 话 框 中 标尺 的 显示 比例 ， 方 便 用 户 对 声音 的 总 体 效果 进行 调整 。 
以 秒 为 单位 显示 标尺 的 显示 比例 。 

以 帧 为 单位 显示 标尺 的 显示 比例 。 


EL 
按 Ctrl+Enter 组 合 键 测试 动画 ， 即 可 看 到 随 着 画 
面 越 来 越 清晰 显示 ， 声 音 也 越 来 越 清晰 地 播 出 。 


制作 网 页 简单 动画 


1 经 验 一 


El 


在 编辑 好 声音 后 用 户 还 可 通过 一 些 简单 的 操作 为 声音 添加 效果 ， 如 设置 声音 的 淡 入 、 淡 出 等 。 
其 方法 是 : 选中 插入 音频 的 帧 后 ， 在 “属性 ”面板 的 “效果 ”下 拉 列 表 框 中 选择 需要 的 效果 ， 


如 下 图 所 示 。 


加 无 : 不 对 音频 进行 任何 设置 。 
个 左 声 道 : 只 播放 左 声 道 。 
让 右 声 道 : 只 播放 右 声 道 。 


个 向 右 淡出 : 在 播放 时 控制 声音 ， 从 左 声 道 慢 慢 切 换 


到 右 声 道 。 


个 向 左 淡 出 : 在 播放 时 控制 声音 ， 从 右 声 道 慢 慢 切换 


到 左 声 道 。 


个 淡 入 : 在 播放 时 音量 逐渐 增长 。 
但 淡出 : 在 播放 时 音量 逐渐 减 小 。 


个 自 定义 : 选择 该 选项 ， 将 打开 “编辑 封套 ”对 话 框 ， 


“效果 ”下 拉 列 表 框 中 各 选项 作用 如 下 。 


在 其 中 用 户 可 自行 编辑 声音 。 
7.2.6 压缩 并 导出 声音 
想 要 压缩 并 导出 ， 用 户 可 以 选择 单个 事件 声音 的 压缩 选项 , 然后 用 这 些 设置 导出 声音 ， 
也 可 以 给 单 # 个 音频 流 选择 压缩 选项 。 需 注 意 的 是 , 文档 中 的 所 有 音频 流 都 将 导出 为 一 个 流 文件 ， 
而 且 所 用 的 设置 是 所 有 应 用 于 单个 音频 流 的 设置 中 的 最 高 级 别 。 该 导出 设置 包括 视频 对 旬 中 的 
音频 流 。 


采样 比率 和 压缩 程度 会 造成 导出 的 SWF 文件 
压缩 倍数 越 大 ， 采 样 比 
实验 找到 声音 品质 和 文件 大 小 的 最 佳 平衡 。 在 处 理 导 入 的 mp3 文件 时 


率 越 低 ， 声 音 


文件 就 越 小 ， 


声音 的 品质 和 大 小 有 很 大 的 不 同 。 声音 的 
声音 品质 也 越 差 。 在 实际 压缩 时 ， 应 当 通过 


的 相同 设置 将 文件 导出 为 mp3 格式 。 


1. 压缩 声音 


在 导出 或 发 布 动画 时 ， 通 过 设置 压缩 声音 可 以 


， 可 以 使 


导入 文件 时 


缩 设置 还 可 以 减 小 音质 的 损伤 。 


下 面 将 打开 


“压缩 照片 fla” 


动画 文档 ， 为 声音 


更 加 有 效 地 减 小 文件 大 


设置 压缩 ， 其 具体 


小 ， 且 通过 适当 的 压 


操作 如 下 : 


32 
pS 
人 


22 
Hour: 
发 


二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


AGE 用。 设置 压缩 格式 


1. 打开 “压缩 照片 fla” 动画 文档 , 在 “ 库 ” 
面板 中 选择 “背景 音乐 ”音频 文件 ， 然 
后 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 
选择 “属性 ”命令 ， 打 开 “ 声 音 属性 ” 
对 话 框 。 在 “压缩 ”下 拉 列 表 框 中 选择 
“MP3” 选 项 ， 单 击 基 开 莽 加 可 按 钮 试听 
效果 。 


2 单 击 EEBE 按钮 。 
发 本 “区 
配置 祈 件 (Rk[ 时 让 i] | Bm neh tz ls| 
(sain | A 
DE | 


日 Ma 训 贞 广 辽 


机 本 设计 压缩 格式 


1. 打开 “声音 设置 ”对 话 框 ， 在 该 对 话 框 中 ， 
设置 “压缩 、 比 特 率 、 品 质 ” 为 “MP3、20 
kbps、 中 ”。 

2. 依次 单 击 EEEE9 按 钮 ， 返 回 操作 界面 。 


2. 压缩 声音 选项 


在 “声音 设置 ”对 话 框 中 的 “压缩 ”选项 将 直接 影响 到 Flash 动画 的 音质 和 文件 大 小 ， 而 


[Br 
EuaesYaminstatenDeieopi 洒 时 音乐 np 


914 年 ?月 * 15090s 
22kHz 并 体 声 蕉 位 174 种 3369 号 


(1 选择 7 


AGE 和 设置 压缩 格式 


1. 选择 【文件 ]/【 发 布设 置 ) 命令 , 打开 “发 
布设 置 ” 对 话 框 ， 先 中国 本 二 加 出 复 选 框 。 
2.， 单 击 “ 音 频 事件 ”后 的 文本 超级 链接 。 


ND ne 
选中 ISSNUS 末 复 选 框 后 ， 设 置 其 右 
选项 中 的 “JPEG 品质 ”选项 也 可 以 压缩 文 
件 大 小 ， 但 设置 该 选项 会 影响 Flash 画面 。 


人 


声音 认 轩 


文件 大 小 又 直接 影响 到 Flash 动画 在 网 页 中 的 显示 速度 。 选 择 不 同 的 选项 ， 其 压缩 设置 效果 也 


不 一 样 ， 压 缩 声 音 选 项 作用 如 下 。 


如 “ADPCM” 和 “原始 ”压缩 选项 : ADPCM 压缩 用 于 设置 8 位 或 16 位 声音 数据 的 压缩。 
导出 较 短 的 事件 声音 (如 单 击 按钮 ) 时 ， 须 使 用 ADPCM 设置 。 原 始 压 缩 导出 声音 时 不 
进行 声音 压缩 。 选 择 这 两 个 选项 后 在 该 对 话 框 中 选中 国生 SE 匡 国 复 选 框 会 将 混合 立体 


声 转换 成 非 立体 声 。 设置 “采样 率 ” 选 项 可 控制 声音 保 真 度 和 文件 大 小 ， 
率 会 减 小 文件 大 小 ， 但 也 会 降低 声音 品质 。 


较 低 的 采样 比 
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下“MP3” 压 缩 选项 : MP3 压缩 可 以 以 MP3 压缩 格式 导出 声音 。 当 导出 像 乐 曲 这 样 较 长 
的 音频 流 时 ， 须 使 用 MP3 选项 。 如 果 要 导出 一 个 以 MP3 格式 导入 的 文件 ， 导 出 时 则 无 
须 更 改 设置 。“ 比 特 率 ”选项 用 于 确定 已 导出 声音 文件 中 每 秒 的 位 数 。Flash 支持 8Kbps 
到 160Kbps CBR (恒定 比特 率 ) 。 导 出 音乐 时 ， 为 获得 最 佳 效果 ， 应 将 比特 率 设 置 为 16 
Kbps 或 更 高 ; “ 预 处 理 ” 选 项 将 混合 立体 声 转换 成 非 立 体 声 ( 单 声 不 受 此 选项 的 影响 ); “ 品 
质 ” 选 项 决定 压缩 速度 和 音声 品质 .“ 快 速 ” 选 项 的 压缩 速度 较 快 , 但 声音 品质 较 低 ;“ 中 等 ” 
选项 的 压缩 速度 较 慢 ,但 声音 品质 较 高 ，“ 最 好 ”选项 的 压缩 速度 最 慢 , 但 声音 品质 最 高 。 

如 “语音 ”压缩 选项 : 语音 压缩 采用 适合 于 语音 的 压缩 方式 导出 声音 。 “采样 率 ” 选 项 用 于 
控制 声音 保 真 度 和 文件 大 小 。 较 低 的 采样 率 可 以 减 小 文件 大 小 ， 但 也 会 降低 声音 品质 。 


| 经 验 一 筹 乱 一 一 其 他 选项 含义 


“采样 率 ”对 于 不 同音 质 需 求 ， 应 该 选择 不 同 的 采样 率 ， 其 使 用 范围 如 下 。 
5 kHz: 是 语音 的 最 低 可 接受 标准 。 233 
但 11 kHz: 是 建议 的 最 低 声 音 品 质 ， 是 标准 CD 比率 的 四 分 之 一 。 72 口 


由 22 kHz: 对 于 Web 上 的 大 多 数 音乐 类 型 ， 此 采样 比率 是 可 接受 的 。 
所 44 kHz: 是 标准 的 CD 音频 比率 。 但 是 ， 由 于 应 用 了 压缩 ，SWF 文件 中 的 声音 就 不 是 CD 
品质 了 . 


7.2.7 可 导入 的 视频 格式 “@ 


Flash 可 以 支持 的 视频 格式 有 flv 和 f4v 格式 ， flv 和 f4v (H.264) 视频 格式 具有 技术 和 创意 
优势 ， 允许 用 户 将 视频 和 数据 、 图 形 、 声 音 , 以 及 交互 式 控件 融合 在 一 起 。 通 过 flv 和 f4v 视频 ， 
户 可 轻松 将 视频 以 几乎 任何 人 都 可 以 查看 的 格式 放 到 网 页 上 。 52 《 


7.2.8 导入 视频 


Flash 可 以 通过 使 用 导入 向 导 和 FLVPlayback 组 件 两 种 方式 导入 视频 ， 下 面 对 这 两 种 添加 
视频 的 方法 进行 讲解 。 
. 视频 导入 向 导 
户 可 以 导入 本 地 存储 的 视频 文件 ， 对 于 嵌入 视频 时 ， 所 有 视频 文件 数据 都 将 添加 到 
Flash 文件 中 。 这 会 导致 Flash 文件 及 随后 生成 的 SWF 文件 体积 较 大 ， 不 易于 传播 。 视 频 被 放 
置 在 时 间 轴 中 ， 可 以 在 此 查看 时 间 轴 帧 中 显示 的 单独 视频 帧 。 由 于 每 个 视频 由 都 由 时 间 轴 中 的 
一 个 帧 表示 ， 因 此 视频 剪辑 和 SWF 文件 的 由 速率 必须 设置 为 相同 的 速率 。 六 
需要 注意 的 是 ， 对 于 视频 时 间 少 于 10 秒 的 较 小 视频 剪辑 ， 在 动画 中 导入 视频 的 效果 最 好 。 
如 果 正 在 使 用 回放 时 间 较 长 的 视频 剪辑 ， 最 好 使 用 FLVPlayback 组 件 传送 视频 流 。 
本 例 将 新 建 一 个 空白 动画 文档 ， 通 过 视频 导入 向 导 导入 一 段 视频 ， 再 在 其 中 输入 文本 制作 
字幕 效果 ， 其 具体 操作 如 下 ， 


a 
2 
Pai 


Hour: 


2 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


EX 


选择 视频 


侈 的 视 烦 交 件 在 时 理 2 
@ 在 惫 的 计算 机 上 : 


rw CE 


Cl 
口 在 Sr 中 江 入 FU 基 在 时 0 中 和 内 
Of yr 中 用 直人 

上 〇 已 经 部 署 到 mW 由 服务 器 、Fiash vidao Streamng service 慌 Fash Mediz serve 
me[ 


示 刚 ， httpyinvcomaineanydreaorivideoph 
mayfnvdomaincomdFedon/nideasm 


如 本 扫 后 


和 


1. 新 建 一 个 尺寸 为 800 x 550 像素 ， 背 景色 为 黑 
色 的 空白 文档 。 选 择 【文件 ] /【 导 入 】/【 导 
入 视频 】 命令， 打开 “导入 视频 ”对 话 框 。 
在 其 中 单 击 [ES 按 钮 。 

2.， 在 打开 的 “打开 ”对 话 框 中 选择 “ 花 苹 .flv” 


i 导入 视频 


返回 “导入 视频 ”对 话 框 ， 在 “您 的 视频 
文件 在 哪里 ? ” 栏 中 选中 ER 
单 选 按钮 。 

2. 单 击 区 = 到 按钮 。 


在 打开 的 对 话 框 中 选择 用 于 视频 嵌入 到 

SWF 文件 的 元 件 类 型 ， 这 里 选择 “嵌入 的 

视频 ”选项 ， 并 取消 选中 加 出 复 选 框 。 
2， 单 击 EEEE 按钮。 


视频 文件 ， 单 击 匡 we 按钮 。 
国 : [一 
GO nH, se EE 四 | 
二 XS 
本 机 HB 
us 20141V25 1824 。 六 4 幸 
Bama 2014/U21 1744 。 文件 严 
Teen 2014/W24 17:00 。 双人 天 
‖ 可 = 医 t 20141V23 1106 。 六 二 
四 xs5 现 2014/U22 1527 。 又 M 腾 
| 到 an [ET ET 
te (CY 
| 
总 HE 主人 
+e F) 
[I 
文 #ENk 其 v 
EEE ee 
[EC 二 | 


Fy: nopyraomaweamanaen/mdesny 
resimeerancawaraaeniveeexm 


车 各 培 入 忒 从 项 可 能 引 夫 有关 站 上 1 是 这 各 导入 视 有 方法 人 建议 用 于 次 有 靖 顷 人 hj 和 地 的 机 绷 加 格 ” 
了 斯 放 六 二 要 所 
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二 和 


1. 在 打开 的 窗口 中 单 击 匡 滞 按 钮 。 稍 等 片 
刻 视频 就 将 被 导入 到 舞台 中 ，“ 时 间 轴 ” 面 本 


Eeersammemaaripedap 避 涛 片头 和 
板 将 自动 延长 到 播放 视频 需要 的 全 部 帧 数 。 ME 
新 建 图 层 2。 交 册 月 办 以 [7 了 发展、 


口 入 盯 师 后 ,在 Fa 天 双 中 坦 看 训 纪 主要 


(1) 单 击 ) 
[Dy aa [= | 


Av 


1. 使 用 “任意 变形 工具 ” 鄙 将 插入 的 视频 缩小 
到 和 场景 宽度 一 样 的 宽度 。 在 图 层 2 的 第 40 


帧 插入 关键 帧 
全 于 训 。 2 选择 "文本 工具 " 国 , 在 * 属 性" 面板 中 设置 " 系 
出 A 列 、 大 小 、 颜色" 为 “方正 综艺 简体 、60.0 点 、 
Ne 白色 ( 半 FFFF)"”。 


中 3， 使 用 良 标 在 场景 中 间 输 入 文本 。 


CE LL 


本 丁丁 设置 文字 通明 效果 

1.， 选中 输入 的 文本 ， 在 “属性 ”面板 的 “色彩 
效果 ” 栏 中 设置 “样式 、Alpha” 为 “Alpha、 
0%" 。 

2.， 在 第 130 帧 中 插入 关键 帧 , 选中 输入 的 文本 ， 
在 “属性 ”面板 的 “色彩 效果 ” 栏 中 设置 “ 样 
式 、Alpha” 为 “Alpha、100%”。 在 第 180 

帧 上 插入 关键 帧 。 


42 《 
Hour: 
人 


32 《 
Hour: 
人 
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RSUEBIO7E 测试 动画 
在 图 层 2 中 ,选择 第 40~130 帧 。 单 击 鼠 标 右键 ， 


在 弹出 的 
命令 。 按 


到 视频 正在 播放 ， 文 字 随 即 显示 的 效果 。 


2. 1 
FLVPlayback 组 件 使 用 户 可 以 向 Flash 文档 快速 添加 全 功能 的 FLV 播放 控制 ， 并 提供 对 渐 


进 式 下 载 和 
FLVPlayback 组 件 包含 FLV 
和 回放 视频 。 


快捷 菜单 中 选择 “创建 传统 补 间 动 画 ” 
Ctrl+Enter 组 合 键 ， 测 试 动画 ， 可 查看 


吏 用 FLVPlayback 组 件 


流 式 加 载 flv 或 f4v 文件 的 支持 。FLVPlayback 组 件 是 用 于 查看 视频 的 显示 区 域 。 
定义 用 户 界面 控件 ， 这 是 一 组 控制 按钮 ， 播放 、 停 止 、 暂 停 


下 


将 新 建 空白 文档 并 在 其 中 加 载 “ 日 出 ”视频 ， 将 其 制作 为 播放 器 效果 。 通 过 单 
中 的 对 应 按钮 ， 可 控制 视频 的 


6 动画 


日 


播放 ， 其 具体 操作 如 下 : 


SITER02 添加 组 件 
1.， 打 开 [【 窗口 ] 儿 组 件 ] 命 令 , 打开 “组 件 " 面板 ， 


展开 


2.， 选择 FLVPlayback 组 件 ， 单 击 或 拖 动 添加 到 


Video 文件 夹 。 


景 ， 并 使 用 “任意 变形 工具 ” 阮 | 将 其 放大 。 


\ 
2 


使 用 FLVPlayback 组 件 加 载 外 部 视 
在 “ 库 ” 面 板 下 添加 组 件 文件 。 


STEPOE 导入 素材 
新 建 一 个 尺寸 为 1280 x 800 像素 的 空白 文档 ， 将 
“日 出 背景 jpg "文件 导入 到 舞台 中 , 并 锁定 图 层 1， 
新 建 图 层 2。 
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AGER 03 二 设置 组 件 路 径 

1. 选择 组 件 ， 在 “属性 ”面板 中 单 击 “Source” 
选项 后 的 天 按钮 。 

2. 打开 “内 容 路 径 ” 对 话 框 ， 单 击 副 按钮 。 在 
打开 的 “浏览 源 文件 ”对 话 框 中 选择 “日 
出 flv” 视频 文件 。 

3. 返回 “内 容 路 径 ” 对 话 框 ， 在 其 中 单 击 匡 可 


按钮 。 


EE wt 
再 次 使 用 “任意 变形 工具 ” 咽 编 辑 组 件 大 小 ， 将 
组 件 移动 到 舞台 中 并 放大 视频 。 单 击 国 潮 按钮 ， 播 
放 视 频 ， 单 击 专 重 按 钮 可 暂停 播放 视频 。 


‖ 经 验 一 筹 管 一 一 FLVPlayback 组 件 的 功能 


在 Flash 中 ，FLVPlayback 组 件 的 主要 功能 介绍 如 下 : 


如 提供 一 组 预制 的 外 观 ， 以 自 定 义 回放 控件 和 用 户 界面 的 外 观 。 

如 使 高 级 用 户 可 以 创建 自己 的 自 定义 外 观 。 

加 提供 提示 点 ， 以 将 视频 与 Flash 应 用 程序 中 的 动画 、 文 本 和 图 形 同 步 。 
把 提供 对 自 定义 内 容 的 实时 预览 。 

加 保持 合理 的 SWF 文件 大 小 以 便于 下 载 。 


间 : 在 使 用 FLVPlayback 组 件 导入 视频 后 ， 其 “属性 ”面板 中 的 主要 参数 
it 呢 ? 
: 在 Flash 中 使 用 FLVPlayback 组 件 导入 视频 时 ， 其 “属性 ”面板 如 右 

图 所 示 。 在 该 人 “align ”选项 用 于 设置 影片 内 容 的 一 
对 齐 方式 ; “autoPlay ”选项 用 于 确定 如 何 播放 ; “skin ” 和 
选项 用 于 设置 播放 器 的 外 观 ; “sourse” 选 项 用 于 指定 flv、 Er 
f4v 的 URL; “volume ”选项 用 于 设置 播放 器 的 音量 ， 当 
Flash 执行 FLVPlayback 实例 时 ， 不 会 发 生 任 何事 情 。 


32 
Hour: 
个 


12 
Hour: 
全 


证 习 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CSs6 版 ) 


ol 上 机 站 小 时 制 |f “音乐 贺 9 动画 


& 巩固 动画 的 制作 方法 和 技巧 。 
进一步 掌握 导入 声音 和 声音 的 编辑 方法 。 


本 例 将 制作 音乐 贺卡 动画 ， 在 动态 贺卡 中 加 入 音频 ， 并 对 音频 属性 进行 编辑 ， 其 最 终 效 
果 如 下 图 所 示 。 


机 本 
新 建 一 个 Flash 文档 ， 使 用 绘图 工具 绘制 一 个 与 
场景 一 样 大 小 的 背景 图 形 。 


| 制作 网 页 贺卡 时 为 了 增加 气氛 一 般 
ls 动画 上 添加 声音 。 | 


本 本 本 经 审 房 层 图 形 

选择 [ 插入 ]/[ 新 建 元 件 ] 命 令 ， 新 建 一 个 “房屋 
图 形 元 件 。 使 用 “钢笔 工具 ” 闫 和 “铅笔 工具 ” 国 
绘制 小 木屋 图 形 轮廓 。 使 用 “颜料 桶 工具 ”为 
图 形 填充 颜色 。 


新 建 一 个 “ 树 ” 


小 树 图 形 轮廓 ， 
填充 颜色 。 


制作 网 页 简单 动画 


绘制 小 树 


图 


形 元 件 ， 使 用 绘图 工具 绘制 出 


再 使 用 


“颜料 桶 了 


[ 具 ” 网 为 小 树 


SEE 制作 “闪光 ”元 件 

1. 新 建 一 个 “ 彩 球 ” 图 形 元 件 ， 并 绘制 一 
和信 相关 国 开 。 

2. 新 建 一 个 “闪光 ”影片 剪辑 元 件 ， 在 图 层 一 

中 绘制 一 个 黄色 边缘 半 透 明 的 渐变 正 国 。 新 

建 图 层 2， 使 用 “多 边 形 工 具 ” 〇 绘制 一 

边 形 。 在 图 层 1、 图 层 2 的 第 5 帧 、 第 10 由 

插入 关键 帧 ， 将 图 层 1、 图 层 2 关键 帧 中 的 形 

状 缩小 。 在 图 层 1、 图 层 2 的 第 1~9 帧 上 凶 

建 补 间 形状 动画 。 


ER 装饰 小 树 


新 建 一 个 “小 树 ” 影 片 剪辑 元 件 ， 将 “ 树 ” 
元 件 拖 入 到 场景 中 。 

2. 新 建 图 层 2， 拖 入 多 个 “ 彩 球 ”元 件 到 图 层 2 
中 , 并 在 “属性 " 面板 中 修改 彩 球 的 色彩 效果 。 
新 建 图 层 3, 将 “闪光 " 元 件 拖 入 到 图 层 3 中 。 


为 装饰 小 树 的 彩 球 更 改 颜 色 的 方法 | | 
是 : 选择 元 件 实例 ,在 “属性 ” 面板 中 展开 “ 色 
彩 效果 ” 栏 ， 在 “样式 ”下 拉 列 表 框 中 选择 “高 
级 ”选项 最 后 更 改 颜色 可 以 修改 元 件 的 颜色 


绘制 ) 


新 建 一 个 “ 马 


马 填充 颜色 。 


ti 村 


”图 


形 元 件 ， 使 用 “钢笔 工具 ”多 
绘制 小 马 图 形 轮廓 。 使 用 “颜料 桶 工具 ” 欧 为 小 
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ES 

1. 返回 主场 景 ， 在 第 40 帧 处 插入 帧 。 

2. 新 建 图 层 2， 拖 入 “ 马 ” 元 件 到 图 层 2， 并 在 
第 40 帧 处 插入 帧 。 在 第 1 帧 处 创建 补 间 动 画 ， 


分 别 在 第 5、10、15、25、30 和 35 帧 处 用 “ 任 
意 变形 工具 ” 鹃 | 旋转 元 件 ， 制 作 小 马 左右 摆 
动 的 动画 效果 。 

3. 新 建 图 层 3， 并 将 图 层 3 重 命名 为 “音乐 ”。 


丁丁 导入 并 编辑 声音 


1.， 将 "bg.wav” 音 频 文件 导入 到 “ 库 ” 面 板 

中 , 选择 “音乐 ”图 层 的 第 1 帧 。 在 “属性 ” 
面板 的 “声音 ” 栏 中 设置 “名 称 ” 为 “bg. 
WAV” 。 

2.， 单 击 辆 按钮 ， 打 开 “ 编 辑 封套 ” 对 话 框 。 

3.， 在 打开 的 “编辑 封套 ”对 话 框 的 音频 波段 处 ， 
单 击 添加 几 个 封套 手柄 ， 调 整 手柄 位 置 。 

4， 单 击 [aeE 可 按钮 


7.3 练习 1 小 时 


本 章 主 要 介绍 了 创建 基本 动画 和 多 媒体 动画 的 方法 ， 用 户 要 想 在 


这 


吊 


作 中 熟练 使 


们 ， 还 需 进 行 巩固 练习 。 下 面 以 制作 “波浪 ”动画 为 例 ， 进 一 步 巩固 这 些 知识 的 使 用 方法 。 


制作 “波浪 ”动画 


所 示 。 


本 例 将 制作 “波浪 ” 动画， 首先 将 导入 “海浪 jpg” 图 像素 材 ， 新 建 “ 波 浪 ” 元 
件 绘制 形状 。 再 新 建 “ 海 水 ”元 件 ， 导 入 “海浪 ”图 像 ， 分 离 图 像 ， 抠 取 海 水 部 分 。 
回 到 主场 景 添加 补 间 形 状 动画 和 遮 章 图 层 ， 制 作 波浪 涌 动 的 效果 ， 其 最 终 效果 如 下 图 


吕 


弟 
制作 并 发 布 交互 式 动画 让 


学 习 2: e@ 制作 Flash 脚本 动画 
在 Flash 中 ， 网 页 制作 人 员 不 仅 可 以 通过 时 3 se sa 
间 轴 与 图 层 来 制作 简单 的 动画 ， 还 可 以 根据 实际 
的 需要 ， 制 作 具 有 复杂 功能 的 交互 性 动画 ， 以 实 
现 动画 的 高 级 应 用 ， 并 美化 网 页 效果 。 制 作 完成 @ 外 
后 还 需 将 默认 的 fla 动画 格式 发 布 为 网 页 能 够 识 
别 的 格式 ， 如 SWF、MPEG、AVI 等 。 : 


上 机 了 小 时 
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8.1 制作 Flash 脚本 动画 


ActionScript 3.0 脚本 作为 Flash、 交 互 功能 实现 的 核心 , 无 论 是 利用 Flash 制作 的 交互 游戏 ， 
还 是 简单 的 动画 作品 ， 通 常 都 需要 涉及 ActionScript 脚本 的 应 用 。ActionScript 脚本 语言 允许 
户 向 应 用 程序 添加 复杂 的 交互 性 、 播 放 控制 和 数据 显示 。 可 以 使 用 动作 面板 、“ 脚 本 ”窗口 或 
外 部 编辑 器 在 创作 环境 内 添加 ActionScript 脚 本 , 下 面 对 在 Flash 中 使 用 脚本 制作 动画 进行 讲解 。 


ONES ------ 


,了解 ActionScript 3.0 的 基本 语法 。 掌握 常用 的 ActionScript 语句 。 


! Q, 掌握 在 Flash 中 添加 脚本 的 方法 。 | | 


8.1.1 了 解 ActionScript 

随 着 动画 制作 要 求 的 不 断 变 化 ， 为 了 加 强 动画 的 可 编辑 性 ， 出 现 了 用 于 控制 动画 的 
ActionScript 语句 。 目 前 ActionScript 推出 了 3 个 版 本 ， 它 们 的 作用 有 着 一 定 的 区 别 ， 其 特点 和 
作用 分 别 如 下 。 

得 ActionScript 1.0: ActionScript 1.0 是 最 原始 同时 也 是 最 简单 的 ActionScript ， 它 功能 简单 ， 
目前 使 用 较 少 ， 但 仍然 有 部 分 Flash Lite Player 在 使 用 。 

办 ActionScript 2.0: ActionScript 2.0 的 最 大 的 特点 是 出 现 了 对 象 的 概念 ， 这 从 根本 上 使 动画 
特效 变 得 更 加 轻松 、 随 意 ， 并 且 ActionScript 2.0 比 ActionScript 3.0 容易 学 习 ， 这 使 得 动 
画 制作 者 在 制作 小 型 的 Flash 动画 时 更 加 偏爱 于 ActionScript 2.0。 

办 ActionScript 3.0: ActionScript 3.0 是 目前 Flash 动画 中 较 常 使 用 的 脚本 语言 。 使 用 它 
运行 编译 代码 能 得 到 最 快 的 速度 ， 可 以 得 到 更 加 流畅 的 画面 、 更 加 迅速 的 动画 响应 。 
ActionScript 3.0 并 不 能 单纯 认为 是 ActionScript 2.0 的 升级 版 本 ，ActionScript 3.0 是 完全 面 
向 对 象 的 脚本 语言 ， 而 ActionScript 2.0 则 是 部 分 面向 对 象 的 脚本 语言 。 


8.1.2 ”ActionScript 3.0 语法 规则 


ActionScript 遵循 自身 的 语法 规则 和 保留 关键 字 ， 并 且 人 允许 使 用 变量 存储 和 检索 信息 。 
ActionScript 含有 一 个 很 大 的 内 置 类 库 ， 使 用 户 可 以 通过 创建 对 象 来 执行 许多 有 用 的 任务 。 它 
的 结构 和 C、Java 等 高 级 编程 语言 相似 ， 采 用 面向 对 象 编程 的 原理 ， 因 此 ， 对 于 初学 者 和 有 编 
程 经 验 的 用 户 来 说 , 学 习 ActionScript 脚 本 都 比较 轻松 。 下 面 将 分 别 对 ActionScript 3.0 基 本 语法 、 
变量 和 常量 、 数 据 类 型 、 函 数 、 类 型 转换 语法 规则 进行 讲解 。 

1. 基本 语法 

在 使 用 ActionScript 时 ， 一定 要 注意 其 中 最 基础 的 基本 语法 ， 否 则 ， 即 使 整个 脚本 程序 段 
问题 ， 基 本 语句 段 同 样 无 法 运行 。ActionScript 语句 的 基本 语法 包括 : 点 语法 、 括 号 、 分 号 、 
寻 的 大 小 写 、 关 键 字 和 注释 等 。 下 面 对 它 们 进行 详细 讲解 。 

(1) 点 语法 
在 ActionScript 语句 中 ， 点 语法 是 最 基础 的 语法 。 使 用 点 语法 ， 可 以 使 用 属性 名 ( 或 方法 
名 ) 的 实例 名 来 引用 类 的 属性 或 方法 。 如 下 所 示 为 在 代码 中 创建 实例 名 来 访问 propl 属性 和 


烛 泌 
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method1() 的 方法 : 

var myDotEx:DotExample = new DotExample(); 

ImyDotEx.propl = "hello": 

myDotEx.method1(); 

(2) 分 号 

可 以 使 用 分 号 字符 ( ; ) 来 终止 语句 。 如 果 省 略 分 号 字符 ， 则 编译 器 假设 一 行 代码 代 表 一 
条 语句 ， 在 程序 中 使 用 分 号 来 终止 语句 ， 可 使 代码 易于 阅读 。 

〈3 ) 字母 的 大 小 写 

ActionScript 3.0 是 一 种 区 分 大 小 写 的 编程 语言 。 大 小 写 不 同 的 标识 符 会 被 视 为 不 同 。 如 下 
面 的 代码 将 创建 两 个 不 同 的 变量 : 


var num25:uint; 


var Num25S:uint: 


(4) 括号 
在 ActionScript 中 ， 括 号 主要 包括 大 括号 {} 和 小 括号 () 两 种 。 大 括号 用 于 将 代码 分 成 不 
同 的 块 ， 而 小 括号 通常 用 于 放置 使 用 动作 时 的 参数 。 在 定义 一 个 函数 以 及 调用 该 函数 时 ， 都 需 
要 使 用 到 小 括号 。 
(5) 注释 
ActionScript 3.0 为 了 更 快 地 让 浏览 者 了 解 脚本 程序 段 的 作用 ， 用 户 可 对 一 些 有 特殊 作用 的 
脚本 程序 段 进行 注释 。 代 码 支持 两 种 类 型 的 注释 : 单行 注释 和 多 行 注 释 。 其 使 用 方法 如 下 。 
如 单行 注释 : 单行 注释 以 两 个 正 针 杠 字符 (//) 开头 并 持续 到 该 行 的 末尾 。 如 代码 : “var 
someNumber:Number = 125; /a single line comment” 。 
个 多 行 注释 : 多 行 注释 以 一 个 正 儿 杠 和 一 个 星 号 (/*) 开头 ， 以 一 个 星 号 和 一 个 正 斜 杠 
(*/) 结尾 。 如 代码 : “h# This is multiline comment that can span more than one line of code 
是 
(6 ) 关键 字 
在 ActionScript 中 ， 具 有 特殊 含义 能 被 脚本 调用 的 特定 单词 ， 被 称 为 “关键 字 ”， 如 as、 
这 to 和 true 等 。 在 编写 语句 时 一 定 要 注意 不 要 使 用 Flash 预 留 的 关键 字 ， 如 果 在 Flash 中 使 
了 预 留 的 关键 字 ， 则 会 出 现 程序 无 法 运行 。 
2. 变量 和 常量 
变量 可 用 来 存储 程序 中 使 用 的 值 。 要 声明 变量 , 必须 将 var 语句 和 变量 名 结合 使 用 , 如 代码 : 
var valuel:Number=25; 
常量 是 指 具有 无 法 改变 的 固定 值 的 属性 。 常 量 只 能 被 赋值 一 次 ， 而 且 必 须 在 最 接近 常量 声 
明 的 位 置 赋值 。 


public const minMun:int = 0: 


public const maxMun:int; 
public function A() 
{ 

maxMun = 20; 


} 
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3. 数据 类 型 
数据 类 型 用 于 定义 一 组 值 。 例 如 ，Boolean 数据 类 型 所 定义 的 一 组 值 中 仅 包 含 两 个 值 : 
true 和 false。 除 了 Boolean 数据 类 型 外 ，ActionScript 3.0 还 定义 了 其 他 几 个 常用 的 数据 类 型 ， 
如 String、Number 和 Array 等 。 用 户 可 以 使 用 类 或 接口 来 自 定义 一 组 值 ， 从 而 定义 需要 的 数据 
类 型 。 基 本 数据 类 型 包括 Boolean、int、Numeric、String、Uint 、 void 和 Object 等 ， 下 面 就 将 
解 它 们 的 作用 。 
Boolean: 数据 类 型 只 包含 两 个 值 : true 和 false。 其 中 true 表示 成 立 ，false 表示 不 成 立 。 
如 int:， 在 内 部 存储 为 32 位 整数 ， 包 含 的 整数 集 从 -2,147.483.648~ 2,147,483,647 之 间 (两 端 
包含 在 内 ) 的 所 有 整数 。 
和 内 Numeric: 对 于 Numeric 型 数据 ，ActionScript 3.0 包含 3 种 特定 的 数据 类 型 : Number、 
int 和 uint。 
如 String: 一 个 文本 值 。 如 一 个 名 称 或 书 中 某 一 章 的 文字 。 
从 Uint: 在 内 部 存储 为 32 位 无 符号 整数 ， 包 含 的 整数 集 介 于 0 ~ 4.294.967,295 之 间 (包括 0 
和 4,294,967,295 ) 。 
如 void: 仅 包含 一 个 值 undefined. 
人 Object: 是 由 Object 类 定义 的 。Object 类 用 作 ActionScript 中 的 所 有 类 定义 的 基 类 。 如 下 
所 示 的 两 条 等 效 的 语句 ， 两 者 都 声明 一 个 无 类 型 变量 X: 


Varx 


a 


Var X:* 


4 函数 
函数 是 可 以 向 脚本 传递 值 并 能 将 返回 值 反 复 使 用 的 代码 块 。Flash 中 能 制作 出 的 特效 都 是 
通过 函数 完成 的 ， 常 用 的 函数 分 为 4 类 ， 其 作用 如 下 。 
个 时间 轴 控 制 : 用 于 对 时 间 轴 中 的 播放 头 进行 控制 ， 如 播放 头 的 跳 转 、 播 放 和 停止 等 。 
从 浏览 器 和 网 络 : 对 Flash 在 浏览 器 和 网 络 中 的 属性 和 链接 等 进行 设置 。 
人 影片 剪辑 控制 : 对 影片 剪辑 进行 控制 。 
但 运算 函数 : 运算 函数 对 影片 中 的 数据 进行 处 理 ， 这 类 函数 包括 打印 函数 、 数 学 函数 、 转 换 
函数 和 其 他 函数 4 种 。 


5. 类 型 转换 

在 将 某 个 值 转换 为 其 他 数据 类 型 的 值 时 ， 就 发 生 了 类 型 转换 。 类 型 转换 可 以 是 隐 式 的 ， 也 
可 以 是 显 式 的 。 隐 式 转换 也 称 为 “强制 转换 ”， 有 时 在 播放 器 运行 时 执行 ， 显 式 转换 又 称 为 “ 转 
换 ”， 常 用 于 在 代码 指示 编译 器 将 一 个 数据 类 型 的 变量 视 为 属于 另 一 个 数据 类 型 时 发 生 。 
如 在 下 面 的 代码 中 提取 一 个 布尔 值 并 将 它 转换 为 一 个 整数 : 


人 
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var myBoolean:Boolean = true: 
var myINT:int = Int(myBoolean): 
trace(myINT): // 1 


6. 运算 符 

运算 符 是 一 种 特殊 的 函数 ， 其 效果 与 数学 中 的 加 减 乘 除 相似 ， 它 们 具有 一 个 或 多 个 操作 数 
并 返回 相应 的 值 。 操 作 数 是 运算 符 用 作 输 入 的 值 ( 通常 为 字面 值 、 变 量 或 表达 式 ) 。 例 如 ， 在 
下 面 的 代码 中 ， 将 加 法 运算 符 ( + ) 和 乘法 运算 符 (* ) 与 三 个 字面 值 操作 数 ( 8、3 和 4 ) 结 
合 使 用 返回 一 个 值 。 赋 值 运 算 符 ( = ) 随后 使 用 此 值 将 返回 值 20 赋 给 变量 sumNumber。 

var sumNumber:uint = 8+3*4://uint=20 

常用 的 运算 符 有 数学 运算 符 、 比 较 运 算 符 、 逻 辑 运 算 符 、 相 等 运算 符 和 赋值 运算 符 等 。 下 
面 就 将 讲解 它们 的 作用 和 特点 。 

(1) 数学 运算 符 

数学 运算 符 是 ActionScript 最 简单 也 是 最 常见 的 运算 符 之 一 ， 其 使 用 方法 与 数学 中 完全 一 
致 。 但 如 果 遇 到 数据 类 型 是 数值 型 的 字符 串 时 ,ActionScript 会 将 其 转换 成 数值 后 计算 。 如 “apple” 
将 被 转换 为 0。ActionScript 中 的 数学 运算 符 符号 和 作用 如 下 表 所 示 。 


ActionScript 中 的 数学 运算 符 


c=100%25 


(2 ) 比较 运算 符 

比较 运算 符 一 般 用 于 判断 脚本 中 的 表达 式 的 值 ， 再 根据 比较 返回 一 个 布尔 值 。 然 后 根据 后 
续 的 语句 执行 不 同 的 命令 ， 比 较 运算 符 在 制作 游戏 类 Flash 时 经 常 被 用 到 。 

ActionScript 中 的 比较 运算 符 和 数学 中 基本 相同 , 但 也 有 些 比较 独特 的 比较 运算 符 在 其 中 ， 
ActionScript 中 的 比较 运算 符 符号 和 作用 如 下 表 所 示 。 


dls 


(3 ) 逻辑 运算 符 
逻辑 运算 符 是 一 种 经 常 使 用 的 运算 符 ， 使 用 它 可 计算 两 个 布尔 值 以 返回 第 3 个 布尔 值 。 使 
用 这 种 逻辑 运算 符 可 以 产生 很 多 随机 的 布尔 值 ， 所 以 很 多 动画 制作 师 都 喜欢 使 用 逻辑 运算 符 制 


作 特 效 。ActionScript 中 的 逻辑 运算 符 计 算 后 的 返回 值 如 下 表 所 示 。 
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ActionScript 中 的 逻辑 运算 符 
返回 值 1 
Ttme) 
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多 
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(4 ) 相等 运算 符 
人 相等 运算 符 用 于 测试 两 个 表达 式 是 否 相等 ， 两 边 的 表达 式 可 以 为 数字 、 字 符 串 、 布 尔 值 、 
“对象. 函数 等 ,而 比较 返回 的 结果 为 布尔 值 。 ActionScript 中 的 相等 运算 符 符号 和 作用 如 下 表 所 示 。 


ActionScript 中 的 相等 运算 符 


(5) 赋值 运算 符 
赋值 运算 符 也 是 在 ActionScript 中 经 常 被 使 用 到 的 运算 符 。ActionScript 中 的 赋值 运算 符 符 
号 和 作用 如 下 表 所 示 。 
ActionScript 中 的 赋值 运算 符 
运算 符号 | 


按 位 右 移动 并 里 值 
右 位 移 境 鹤 并 赋值 
接 位 移 并 网 值 


7. 属性 

表示 某 个 对 象 中 绑 定 在 一 起 的 若干 数据 块 中 的 一 个 ，MovieClip 类 具有 rotation、x、width 
和 alpha 等 属性 。 例 如 : 

SqX= 100: 

sq.:y = 200; 
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sq.rotation = 120: 
sq.width = 80; 
sq.alpha = 60%; 


8.1.3 ”常用 ActionScript 语句 


为 了 实现 各 种 各 样 的 效果 ，Flash 的 开发 者 们 为 ActionScript 制作 了 很 多 函数 语句 。 使 
Action 函数 编辑 动画 是 为 了 得 到 某 种 效果 。 通 过 这 些 常用 的 ActionScript 语句 可 以 完成 ， 如 包 
括 播放 控制 语句 、 播 放 跳 转 语句 、 条 件 语 句 和 循环 语句 等 操作 ， 下 面 将 分 别 对 它们 进行 介绍 。 

1. 播放 控制 语句 

播放 控制 语句 主要 包括 控制 动画 、 实 例 对 象 或 声音 的 顺序 播放 和 停止 ， 常 用 的 播放 控制 语 
句 如 下 。 

如 stop: 使 影片 停止 在 当前 时 间 轴 的 当前 帧 中 。 其 语法 为 :stop(); / 括号 中 无 参数 。 
从 play: 使 影片 从 当前 帧 开始 继续 播放 。 其 语法 为 : play ():。 


2. 播放 跳 转 语句 
播放 跳 转 语句 用 于 控制 播放 指针 跳 转 到 其 他 帧 或 者 其 他 场景 ， 常 用 于 根据 浏览 者 的 选择 跳 
转 到 某 些 特定 页 面 的 情况 。 常 见 的 播放 跳 转 语句 如 下 。 

介 gotoAndStop: 跳 转 到 用 帧 标签 或 帧 编号 指定 的 某 一 特定 帧 并 停止 。 其 语法 为 : 
gotoAndStop(" 场景 "," 帧 / 帧 编号 "); 如 果 为 帧 ， 就 不 需要 引号 。 

侣 gotoAndPlay: 跳 转 到 用 帧 标签 或 帧 编号 指定 的 某 一 特定 帧 并 继续 播放 。 其 语法 为 :; 
gotoAndPlay(" 场景 "," 帧 / 帧 编号 "): 如 果 为 帧 ， 就 不 需要 引号 。 

从 nextFrame: 使 影片 转 到 下 一 帧 并 停止 。 其 语法 为 : nextFrame()。 

得 prevFrame: 使 影片 回 到 上 一 帧 并 停止 。 其 语法 为 : prevFrame()。 

介 nextSence: 使 影片 转 到 下 一 场景 并 停止 。 其 语法 为 : nextSence()。 

人 prevSence: 使 影片 回 到 上 一 场景 并 停止 。 其 语法 为 : prevSence()。 


3. 条 件 语句 

条 件 语句 在 动画 中 起 到 判断 条 件 是 否 达成 的 效果 ， 当 开始 进入 脚本 运行 范围 时 ， 脚 本 将 会 
判断 当前 正在 执行 的 操作 是 否 满足 编写 脚本 时 设置 的 条 件 。 如 果 达 到 条 件 就 执行 满足 条 件 的 语 
句 ， 否 则 执行 不 满足 条 件 的 语句 。 下 面 分 别 对 条 件 语句 进行 讲解 。 

(1) if.else 

使 用 直 .else 条 件 语句 可 以 测试 一 个 条 件 ， 如 果 该 条 件 存 在 ， 则 执行 一 个 代码 块 ， 如 果 该 
条 件 不 存在 ， 则 执行 替代 代码 块 。 

下 面 的 代码 测试 x 的 值 是 否 超过 20， 如 果 是 ， 则 生成 一 个 trace() 函数 ， 如 果 不 是 则 生成 
另 一 个 trace() 函数 ， 

if (x > 20) 

: 

trace("x 1s > 20"); 
} 


else 


了 
必 


32 《 
Hour: 
人 


二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


trace("x is <= 20"); 


} 


本 例 将 新 建 一 个 空白 动画 文档 ， 并 创建 一 个 按钮 ， 使 用 让 .else 语句 来 实现 通过 单 击 白色 
的 三 角形 按钮 加 载 外 部 声音 并 进行 播放 和 停止 控制 的 操作 ， 其 具体 操作 如 下 : 


ET 新 建文 档 


-选择 【文件 ]/【 新 建 ] 命令 ， 打开 “新 
建文 档 ” 对 话 框 。 在 “类 型 ”列表 框 
中 选择 “ActionScript 3.0” 选 项 。 

2.， 设置 “ 宽 、 高 " 为 “1200、995”。 

3. 单 击 Ea 本 按钮 。 


将 “ 事 士 乐 ”文件 夹 中 的 所 有 素材 都 导入 到 “ 库 ” 
面板 中 。 将 “背景 ”图 像 移动 到 场景 中 作为 背景 。 


LI 


创建 旋转 元 件 


- 选择 【插入 】/[【 新 建 元 件 】 命令 ， 打 开 “ 创 
建新 元 件 ” 对 话 框 , 在 其 中 设置 “名 称 、 类 型 " 
为 “旋转 、 影 片 剪 辑 ”。 

2， 单 击 EEBE 按钮 。 


本 将 图 像 转换 为 元 件 


进入 元 件 编辑 窗口 ， 将 “按钮 ”图 像 移动 到 
场景 中 ， 选 中 “按钮 ”图 像 。 按 F8 键 ， 打 开 
“转换 为 元 件 ” 对 话 框 ， 在 其 中 设置 “名 称 、 
类 型 ”为 “元 件 1、 图 形 ”。 

单 击 匡 右 囊 按钮 。 


AGE 有 创建 补 间 动 画 


1: 


2: 


在 第 一 帧 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜 
单 中 选择 "创建 补 间 动 画 " 命令。 选择 第 24 帧 ， 
按 F6 键 插入 属性 关键 帧 。 

按 Ctrl+T 组 合 键 ， 打 开 “ 变 形 ”面板 。 选 中 
“元件 1” 元 件 。 在 “变形 ”面板 中 设置 旋转 


为 “360”。 


制作 并 发 布 交互 式 动画 对 


we 创建 按钮 元 件 


. 进入 元 件 编辑 窗口 ， 将 “旋转 ”元 件 移动 型 


.使 用 “钢笔 工具 "” 


选择 【插入 】/【 新建 元 件 】 命令 ， 打开“ 凶 
建新 元 件 " 对 话 框 , 设置 名称、 类 型 " 均 为 " 按 
钮 ”， 单 击 世 至 可 按钮 。 


场景 中 心 。 新 建 图 层 2。 
缠 ， 在 “旋转 ”元 件 上 给 


制 一 个 白色 的 三 角形 。 


Hour: 
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wa 编辑 按钮 元 件 


选择 图 层 1、 图 层 2, 在 “ 按 下 " 帧 插入 关键 帧 。 
选择 图 层 2 的 “ 按 下 ”关键 帧 ， 选 择 白色 的 


名 


三 角形 。 


在 “属性 " 面 ( 


色 (#FFCC00) 
击 ” 帧 并 插入 关键 帧 。 


设置 “填充 颜色 ”为 “ 黄 


o 选择 图 层 1、 图 层 2 的 “点 


SA 
Cm 


wi 创建 补 间 动 画 


返回 主场 景 ， 从 “ 库 ” 面 板 中 将 “前 景 2 
图 像 移动 到 场景 外 的 左下 角 。 
2. 在 第 40 帧 插入 关键 帧 。 
3. 使 用 "选择 工具 ” 国 将 “前 景 2” 图 像 移 
动 到 场景 左下 角 。 在 图 层 2 的 第 1 帧 上 单 
击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 " 创 
建 传统 补 间 动 画 ”命令 。 


Eg 创建 其 他 补 间 动 画 


新 建 图 层 3， 移 动 到 图 层 2 下方。 使 用 
相同 的 方法 ， 在 第 30 帧 插入 关键 帧 ， 将 
“前 景 3” 图 像 移动 到 场景 中 ， 并 创建 
传统 补 间 动 画 。 

2. 新 建 图 层 4, 在 第 55 帧 插入 关键 帧 ,将 “前 
景 1” 图像 移动 到 场景 中 ， 并 创建 传统 
补 间 动 画 。 

3.， 新 建 图 层 5, 在 第 55 帧 插入 关键 帧 将 “前 
景 4” 图像 移动 到 场景 ， 并 创建 传统 补 
间 动 画 。 为 图 层 2、 图 层 3 的 第 70 帧 插 
入 关键 帧 。 
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TE 应 用 按钮 元 伯 


选择 图 层 1 的 第 1 帧 ， 从 “ 库 ” 面 板 中 将 “ 按 

钮 ”元 件 移动 到 场景 右上 角 ， 并 将 其 缩小 。 
2.， 选 中 “按钮 ”元 件 ， 在 “属性 ”面板 中 输入 

“btnplay”。 在 图 层 1 的 第 70 帧 插入 关键 帧 。 


本 本 硬汉 种 


1.， 在 所 有 图 层 上 方 新 建 图 层 ， 并 将 其 重 命名 为 


“ActionScript”。 Ca SC_2tsoundchannel; 
Var 11_ToFlay_2:Boolean = trus; 


他 选择 第 1 帧 ， 按 F9 键 。 打开 “动作 ” 面板 ， a HE an 
将 输入 法 切换 为 英文 输入 法 , 输入 脚本 语句 。 


让 rmt 


;Sound = new Sound(new TRLRequest (更 士 乐 .np3)) ; 
人 


else 
£1_Sc_2, stop(); 
A1_ToFley_2 = If1_ToPlay_2; 


西村 二 输入 肝 本 语句 


1.， 在 “ActionScript” 图 层 的 第 70 帧 上 插入 关 
键 帧 。 
2 打开“ 动作 ”面板 ， 在 其 中 输入 脚本 语句 。 


在 ActionScript 3.0 中 输入 标点 时 ， 必 须 以 英文 输入 ， 否 则 会 出 现 错误 。 为 了 养 成 良好 的 脚本 输 
入 习惯 ， 在 输入 完 每 行 操作 后 都 需要 输入 “;” 号 ， 以 说 明 该 行 命令 行 已 经 结束 。 
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it 
将 “ 事 士 乐 .mp3” 音 频 复制 到 保存 本 动画 文档 的 
同一 个 文件 夹 下 。 按 Ctrl+Enter 组 合 键 , 测试 动画 。 


(2) if..else if 


可 以 使 用 迁 .else if 条 件 语句 测试 多 个 条 件 。 例 如 ， 下 面 的 代码 不 仅 测 试 x 的 值 是 否 超过 


20， 而 且 还 可 测试 x 的 值 是 否 为 负数 : 
f(x> 20) 
‘ 
trace("x is > 20"); 


else if (x <0) 
{ 
trace("x is 负数 "); 
} 
(3) switch 


如 果 多 个 执行 路 径 依赖 于 同一 个 条 件 表达 式 ， 则 switch 语句 非常 有 用 。 该 语句 的 功能 与 
一 长 段 让 .else 让 系列 语句 类 似 ， 但 是 更 易于 阅读 。switch 语句 不 是 对 条 件 进行 测试 以 获得 布尔 


值 ， re te 寺 果 来 确定 要 执行 的 代码 块 。 代 码 块 以 case 语句 


头 


以 break 语句 结尾 。 例 如 ， 下 面 的 switch 语句 基于 由 Date.getDay() 方法 返回 的 日 期 值 输出 星期 


日 期 : 
Var someDate:Date = new Date(); 
Var dayNum:uint = someDate.getDay(); 
switch(dayNum) 
{ 
case 0: 
trace(" 星期 天 "); 
break:; 
case 1: 
trace(" 星期 一 "); 
break; 


Case 2: 
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trace(" 星期 二 "): 
break:; 

Case 3: 
trace(" 星期 三 "); 
break:; 

case 4: 
trace(" 星期 四 "); 
break: 

Case S: 
trace(" 星期 五 "): 
break: 

case 6: 
trace(" 星期 六 "); 
break: 

default: 
trace(" 溢出 "); 
break: 


1 
了 


4. 循环 语句 

循环 语句 是 使 用 一 系列 值 或 变量 来 反复 执行 一 个 特定 的 代码 块 ， 通 常 使 用 大 括号 {} 将 代 
码 块 括 起 来 。 使 用 循环 语句 时 ， 同 样 需要 先 设 置 条 件 ， 当 条 件 为 真 时 ， 被 指定 的 一 个 或 多 个 语 
句 将 被 反复 执行 ， 直 到 条 件 不 能 被 满足 为 止 。 若 当 条 件 一 开始 就 为 假 ， 或 因为 执行 循环 的 原因 
条 件 为 假 后 ， 就 将 退出 循环 执行 后 续 的 语句 。 下 面 将 对 各 循环 语句 进行 讲解 。 

(1) for 

使 用 for 循环 语句 可 以 循环 访问 某 个 变量 以 获得 特定 范围 的 值 。 必 须 在 for 语句 中 提供 3 
个 表达 式 : 一 个 设置 了 初始 值 的 变量 ， 一 个 用 于 确定 循环 何 时 结束 的 条 件 语 句 ， 以 及 一 个 在 每 
次 循环 中 都 更 改变 量 值 的 表达 式 。 例 如 ， 下 面 的 代码 循环 5 次， 变量 i 的 值 从 0 开始 到 4 结束 ， 
输出 结果 是 0~4 的 5 个 数字 ， 每 个 数字 各 占 一 行 。 

Var iint; 

for(i=0:1< 5S; i++) 


了 
\ 


trace(i); 


本 例 将 新 建 一 个 空白 动画 文档 ， 在 其 中 导入 素材 制作 元 件 ， 并 通过 循环 语句 ( for 语句 ) 


将 其 重复 播放 ， 制 作 气 泡 飘 升 的 效果 ， 其 具体 操作 如 下 : 


二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


wi 新 建文 档 


新 建 一 个 尺寸 为 1024 x 640 像素 、 背 景色 为 
“黄色 ( 证 FCC00 )” 的 空白 动画 文档 ,导入 “ 气 
泡 jpg” 图 像 并 将 其 放置 在 场景 中 ， 锁定 图 
层 1。 


2. 新建 图 层 2。 


创 是 新 元 件 FP i 


mo Nea 
ma 
文件 天 : 库 相 目 录 ) 设 置 ) 
bs 


i 柔 化 形状 边缘 


选择 【 修改 ]/[ 形状 】 儿 柔 化 填充 边缘 ] 命 令 ， 
打开 "和 柔 化 填充 边缘 "对 话 框 , 在 其 中 设置 " 距 
离 、 步 长 数 ” 为 “20 像素 、10 

2 单 击 EEBE 按钮 。 


| 将 绘制 的 形状 边缘 变 和 柔和 ， 能 更 窑 | 
本 pe 制作 出 气泡 的 质感 。 


TE 创建 新 元 件 


选择 【 插入 】/【 新 建 元 件 】 命 令 , 打开 “ 创 


建新 元 件 ” 对 话 框 。 在 
为 “气泡 、 影 片 剪 辑 ”。 
2.， 单 击 匡 怠 辐 按 钮 。 


中 设置 “名 称 、 类 型 ” 


本 二 类 
1. 进入 元 件 编辑 窗口 ， 选 择 “ 椭 圆 工具 ” 回 。 
在 "属性 " 面板 中 设置 "笔触 颇 色 、 填 充 卢 色 ” 
都 为 “白色 (#FFFFF )”, Alpha 为 “50%"。 
笔触 为 “15.00”。 
2.， 使 用 鼠标 在 场景 中 绘制 一 个 正 圆 。 


AGE 二 元 件 届 性 


1.， 选中 “气泡 ”元 件 。 

2.， 在“ 属性" 面板 中 设置 "实例 名 称 " 为 “qipao" 。 

3.， 在 “色彩 效果 ” 栏 中 设置 “样式 、Alpha” 为 
“Alpha、 44%”。 


上 - 限 Re 
Dn 再 在 “属性 ” | 
中 调整 气泡 的 透明 度 ， 更 容易 调整 出 需要 


输入 脚本 语句 


层 3， 并 将 其 重 命名 为 “ActionScript”。 


制作 并 发 布 交互 式 动画 


本 本 绘制 高 光 

1.， 再 次 选择 “椭圆 工具 ” 圆 ， 在 “属性 ”面板 

中 设置 “笔触 颜色 、 填 充 颜色 ”为 “无 、 白 
色 ( 古 FFFFF ) ”， 笔 触 为 “0.1”。 

2. 使 用 鼠标 在 气泡 上 绘制 两 个 椭圆 ， 对 它们 进 
行 柔 化 并 填充 边缘 。 


应 用 元 件 


1.， 返回 主 ， 选 择 图 层 2 的 第 1 帧 。 
2. 从 面板 中 ， 将 “气泡 ”元 件 拖 动 到 场 
景 左下 角 并 缩小 。 


拖 入 场景 的 气 池 不 宣 太 大 ， 否 则 最 | 
be 不 太 理 想 。 1 


[| 
[ 司 

国 
Ee LER 


(人 选中 ) 


ET 


a 按 F9 键 ,打开 “动作 ”面板 ， 在 
其 中 输入 脚本 语句 


把 个 栓 Re 
本 段 脚 本 语句 用 于 定义 “qipao” 元 


二 件 是 否 隐藏 。 


Ja ma:: 刷 
策 日 行 ( 共 31 行 ) ,第 对 到 


32 
pS 
人 


22 
Hour: 
人 
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AGED 65 二 输入 控制 属性 脚本 语句 


在 “ActionScript” 图 层 的 第 2 帧 插入 关键 帧 。 
打开 “动作 ”面板 ， 在 其 中 输入 脚本 语句 。 


E73 
也 月 图 W 王 恨 吕 和 节 莹 革 台 四 口 刁 


本 语言 用 于 控制 “qipao” “| 
元 件 的 位 置 、 位 移 以 及 迁 明 度 等 属性 。 


! 


| Actionscipt:z 同 
重 1 行 ( 提 7 行 ) ,第 1 利 


本 本 输入 控制 随机 数 脚本 语句 


+ rondon (00) - 10]; 在 "ActionScript" 图 层 2 的 第 3 帧 插入 关键 帧 。 


Tp) - randea (70)) 


打开 “动作 ”面板 ， 在 其 中 输入 脚本 语句 。 


i 
已 二 。 本 自 肝 本 语言 用 于 控制 “qipao” “| 


| Actlonscript: 3 


rn | 元件 出 现 的 随机 位 置 以 及 随机 数量 . 


wt 
榨 Ctrl+Enter 组 合 键 ， 测 试 动画 
下 方向 上 方 昧 。 


， 可 见 气 泡 将 从 


和 经 验 一 筹 乱 一 一 “代码 片断 ”面板 的 使 用 


在 “动作 ”面板 中 单 击 而 三 量 按 钮 ， 打 开 “ 代 码 片断 ”面板 。 
代码 片断 中 保存 了 常用 的 ActionScript 代码 片断 预 设 ， 这 些 
ActionScript 代码 片断 预 设 不 但 对 Flash 初学 者 很 有 用 ， 而 且 对 
想 降低 工作 量 的 动画 编辑 者 来 说 也 很 实用 。 其 使 用 方法 是 : 在 
Flash 动画 文档 中 选择 需要 添加 脚本 的 元 件 ， 打 开 “ 代 码 片 断 ” 


面板 ， 在 其 中 双击 需要 的 功能 项 ， 再 在 “动画 ”面板 中 对 部 分 Rs 
参数 进行 修改 即 可 。 需要 注意 的 是 ， 若 没有 对 元 件 命名 实例 名 Be 
称 ， 则 在 “代码 片断 ”面板 中 指定 添加 代码 段 时 ， 都 会 打开 “ 设 ssewgam 


置 实例 名 称 ” 对 话 框 ， 此 时 用 户 只 需 单 击 世 8 本 按钮 。 


制作 并 发 布 交互 式 动画 
(2) for.in 


for in 循环 语句 用 于 访问 对 象 属性 或 数组 元 素 。 例 如 ， 可 以 使 用 for..in 循环 语句 来 循环 访 


问 通用 对 象 的 属性 : 


Var myOb]j:Object = {x:20, y:30}: 
for (var i:String in myOb)) 


了 
1 


trace(i + ": "十 myObj[D]): 
} 
// output: 
// x: 20 


ly:30 


(3) foreach..in 
for each..in 循环 语句 用 于 循环 访问 集合 中 的 项 。 如 下 面 摘录 的 代码 所 示 ， 可 以 使 用 for 


each..in 循环 来 循环 访问 通用 对 象 的 属性 ， 但 是 与 for.in 循环 不 同 的 是 ，for each..in 循环 中 的 迭 
代 变 量 包含 属性 所 保存 的 值 ， 而 不 包含 属性 的 名 称 : 


var myObj:Object = {x:20, y:30}: 
for each (var num in myOb)) 


/ 
1 


trace(num); 
} 
// output 
/1/20 
/30 


(4) while 
while 循环 语句 与 让 语句 相似 ,只 要 条 件 为 true, 就 会 反复 执行 ,用 while 循环 的 一 个 缺点 是 ， 


编写 while 循环 更 容易 导致 无 限 循环 。 如 果 遗 漏 递增 计数 器 变量 的 表达 式 ， 则 for 循环 示例 代 
码 将 无 法 编译 ;而 while 循环 示例 代码 将 能 够 编译 。 若 没有 用 来 递增 i 的 表达 式 ， 循 环 将 成 为 
无 限 循环 。 


例如 ， 下 面 的 代码 与 for 循环 示例 生成 的 输出 结果 相同 : 
var Limt= 0; 
while (1 < 5) 


trace(1); 


经 验 一 筹 乱 一 一 大 括号 的 使 用 注意 事项 


尽管 可 以 在 代码 块 中 只 包含 一 条 语句 时 省 略 大 括号 ,但 是 就 像 在 介绍 条 件 语言 时 所 提 到 的 那样 ， 
不 建议 用 户 这 样 做 ， 因 为 这 样 会 无 意 中 增 加 将 以 后 添加 的 语句 从 代码 块 中 排除 的 可 能 性 。 


Hour: 
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(5) do..while 

do..while 循环 语句 是 一 种 while 循环 ， 它 保证 至 少 执行 一 次 代码 块 ， 这 是 因为 在 执行 代码 
块 后 才 会 检查 条 件 。 例 如 : 下 面 的 代码 显示 了 do..while 循环 的 一 个 简单 示例 ， 该 示例 在 条 件 
不 满足 时 也 会 生成 输出 结果 。 


Var Lint = $5; 
do 
{ 
trace(i): 
全 
} while (1 < $5); 
// output: 5 
258 es 
国 目 本 二 En 制作 Flash 导航 菜单 
72 口 


Hours, 马 熟练 在 Flash 文档 中 添加 ActionScript 脚本 。 


， 进一步 掌握 ActionScript 3.0 脚本 的 语法 和 基本 语句 。 川 | 


本 例 将 为 Flash 文档 添加 ActionScript 脚本 ， 制 作 Flash 导航 菜单 ， 实 现 将 鼠标 移动 到 动画 
中 时 ， 动 画 中 的 几 个 导航 菜单 滑 块 就 将 自己 滑动 的 效果 ， 完 成 后 的 效果 如 下 图 所 示 。 


Ei 新 建文 档 


新 建 一 个 尺寸 为 550 x 280 像素 ， 背 景 颜 色 为 
“绿色 ( #009999 )" 的 空白 动画 文档 。 选择“ 文 
本 工具 " 国 , 设置 “系列 、 大 小 、 颜 色 " 为 “ 汉 
仪 超 粗 圆 简 、50.0%、 白 色 (#FFFFFF ) ”。 
2.， 在 场景 中 输入 文字 , 并 添加 投影 和 模糊 效果 。 


fi 


1.， 将 “Flash 导航 菜单 ”文件 夹 中 的 图 像 都 导入 

到 " 库 " 面板 中 。 新 建 一 个 “button1" 按钮 元 件 ， 
在 “ 弹 起 ” 帧 中 将 “商品 .png” 图 像 移动 到 
场景 中 ， 并 将 其 缩小 。 

2.， 选择 “点 击 ” 帧 , 按 F6 键 ， 插入 关键 帧 。 


this, addventListener (Event, ENIER_FRANE, neveto) 
funetion moreto(evt) | 
btnl.yt= (yyl-btnl.y)/5 


日 as:1 同 
寥 8 行 ( 失 9 行 ) ,第 14 列 


本 本 古寺 其 他 元 件 


使 用 相同 的 方法 创建 按钮 元 件 以 及 导航 条 元 件 。 


制作 并 发 布 交互 式 动画 (el 


机 二 fy 上 章程 


1. 新 建 一 个 “导航 条 1” 影 片 剪 辑 元 件 ， 在 图 层 
1 中 绘制 一 个 矩形 ， 并 填充 为 蓝 白 的 线性 透明 
渐变 色 。 

2. 新 建 图 层 2， 并 重 命名 为 “button”， 从 “ 库 ” 
面板 中 将 “button1” 按 钮 元 件 拖 入 到 图 
button 中 ， 并 将 其 缩小 。 

3. 选择 “button1” 元 件 ， 在 “属性 ”面板 中 设 
置 实例 名 称 为 “btn1”。 


沂 


机 本 加 i 本 语句 
新 建 图 层 3， 并 重 命 名 为 as。 按 F9 键 打开 “动作 ” 
面板 ， 在 面板 中 输入 脚本 语句 。 


二 让 滞 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


i 应 用 元 件 


可 主场 景 , 从 “ 库 " 面板 中 将 “导航 条 1"~ 


es 元 件 都 拖 动 到 场景 中 , 并 将 ls 
选中 5 个 导航 条 元 件 。 

2. 打开 [ 窗口 ]/ 对齐 ] 命 令 , 打开 "对齐" 面板 。 
在 其 中 单 击 夯 按钮 ， 使 5 个 元 件 与 场景 居中 
对 齐 。 


8.2 Flash 的 优化 与 发 布 


在 制作 好 Flash 动画 后 ， 就 可 以 对 制作 好 的 动画 进行 发 布 。 在 发 布 前 应 对 Flash 动画 进行 
测试 及 优化 ， 如 测试 动画 效果 是 否 满意 ， 是 否 有 错 等 ， 特 别 是 有 ActionScript 脚本 的 Flash 动 
画 ， 必 须 测试 脚本 是 否 能 顺利 执行 ， 是 否 达到 了 预想 的 目的 。 同 时 为 了 达到 最 佳 的 播放 效果 ， 
以 及 考虑 网 络 传播 速度 的 影响 ， 需 要 对 Flash 进行 优化 ， 让 其 能 使 用 较 短 的 时 间 完 成 下 载 ， 且 
播放 效果 能 非常 流畅 。 另 外 ， 有 时 由 于 一 些 特殊 需求 ， 需 要 将 Flash 导出 为 图 片 ， 或 者 导出 为 
8if 动画 等 。 


BEE ------ 


， 久 进一步 学 握 Flash 动画 优化 的 对 象 及 优化 方法 。 
1 ”人 S 掌握 Flash 动画 测试 方法 。 
有 


灵活 掌握 Flash 导出 的 常用 格式 和 发 布 方法 。 山 | 


8.2.1 优化 动画 
优化 动画 的 目的 是 保证 动画 在 各 个 电脑 上 的 呈现 效果 一 致 ， 同 时 动画 效果 要 尽量 完美 ， 以 

及 下 载 及 传播 的 速度 要 尽量 快 ， 播 放 时 要 尽量 流畅 。 优 化 动画 的 操作 主要 包括 如 下 几 个 方面 。 
1. 优化 文档 

对 动画 文档 整体 进行 优化 ， 可 以 有 效 地 降低 文档 大 小 。 在 对 动画 文档 细节 进行 优化 时 不 能 

忘记 对 文档 的 整体 优化 ， 对 动画 文档 进行 优化 一 般 可 以 从 以 下 几 个 方面 进行 

介 对 于 每 个 多 次 出 现 的 元 素 ， 最 好 使 用 元 件 、 动 画 或 者 其 他 对 象 。 

加 创建 动画 序列 时 ， 尽 可 能 使 用 补 间 动 画 。 补 间 动 画 所 占用 的 文件 空间 要 小 于 一 系列 的 关 
键 帧 。 

刀 对 于 动画 序列 ， 使 用 影片 剪辑 而 不 是 图 形 元 件 。 

人 有 限制 每 个 关键 帧 中 的 改变 区 域 ; 在 尽 可 能 小 的 区 域内 执行 动作 。 


制作 并 发 布 交互 式 动画 


所 避免 使 用 动画 式 的 位 图 元 素 ; 使 用 位 图 图 像 作为 背景 或 者 使 用 静态 元 素 。 
得 尽 可 能 使 用 mp3 这 种 占用 空间 最 小 的 声音 格式 。 


2. 优化 颜色 

在 Flash 中 过 于 丰富 的 颜色 ， 不 但 会 增 大 文档 的 体积 ， 而 且 在 播放 时 ， 还 不 能 完全 地 将 制 
作 的 颜色 展示 出 来 。 优 化 颜色 可 以 从 以 下 几 个 方面 进行 ， 

从 使 用 元 件 属性 检查 器 中 的 “颜色 ”菜单 ， 可 为 单个 元 件 创建 很 多 不 同 颜 色 的 实例 。 
公使 用 “颜色 ”面板 ， 使 文档 的 调 色 板 与 浏览 器 特定 的 调 色 板 相 匹配 。 

人 则 尽量 少 用 渐变 色 ， 使 用 渐变 色 填 充 区 域 会 比 使 用 纯色 填充 区 域 文 件 大 。 

但 尽量 少 用 Alpha 透明 度 ， 因 为 它们 会 减 慢 回放 速度 。 


3. 优化 元 素 和 线条 
对 文档 中 的 元 素 以 及 线条 进行 优化 ， 能 最 大 限度 地 压缩 文档 大 小 ， 对 文档 进行 元 素 和 线条 
优化 可 以 从 以 下 几 个 方面 进行 : 
户 组 合 元 素 。 
从 使 用 图 层 将 动画 过 程 中 发 生变 化 的 元 素 与 保持 不 变 的 元 素 分 离 。 
侣 限制 特殊 线条 类 型 ( 如 虚线 、 点 线 、 锯 齿 线 等 ) 的 数量 。 实 线 所 需 的 内 存 较 少 。 使 用 “ 铅 
笔 工 具 ” 姻 创建 的 线条 比 使 用 “刷子 工具 ” 国 创 建 的 线条 所 需 的 内 存 更 少 。 


4. 优化 文本 和 字体 

通过 文本 和 字体 的 优化 能 使 动画 文档 体积 变 得 更 小 ， 所 以 在 优化 文档 时 ， 文 本 和 字体 也 是 
优化 的 一 个 重要 步骤 。 优 化 文本 和 字体 可 以 从 以 下 几 个 方面 进行 : 
刀 限制 字体 和 字体 样式 的 数量 。 尽量 少 用 嵌入 字体 ， 因 为 它们 会 增加 文件 的 大 小 。 
让 对 于 “嵌入 字体 ”选项 ， 只 选择 需要 的 字符 ， 而 不 要 包括 整个 字体 。 


5. 优化 图 形 
在 Flash 动画 中 ， 往 往 会 出 现 很 多 图 形 ， 丰 富 的 图 形 会 让 动画 更 加 有 趣 、 生 动 ， 当 然 也 会 
增 大 文档 的 体积 。 为 了 控制 文档 的 体积 ， 用 户 可 以 从 以 下 几 个 方面 优化 图 形 : 

人 办 避免 使 用 渐变 ， 因 为 它们 要 求 对 多 种 颜色 进行 计算 和 处 理 ， 电 脑 完成 这 些 操作 的 难度 较 大 。 

如 出 于 同样 的 原因 ， 应 使 SWF 文件 中 使 用 的 Alpha 或 透明 度数 量 保持 在 最 低 限度 。 

下 包含 透明 度 的 动画 对 象 会 占用 大 量 电脑 资源 ， 因 此 必须 将 其 保持 在 最 低 限度 。 位 图 之 上 
的 动画 透明 图 形 是 一 种 会 占用 大 量 电脑 资 源 的 动画 ， 因 此 必须 将 其 保持 在 最 低 限度 ， 或 完 
全 避免 使 用 。 

6. 优化 动画 
在 创建 经 过 优化 和 简化 的 动画 之 前 ， 应 对 项 目 进行 概括 和 计划 。 为 文件 大 小 和 动画 长 度 制 
定 一 个 目标 ， 并 在 整个 开发 过 程 中 对 目标 进行 测试 。 遵 循 下 列 动画 优化 准则 : 

旭 优 化 位 图 时 不 要 对 其 进行 过 度 压 缩 。72 dpi 的 分 辨 率 最 适合 Web 使 用 。 压 缩 位 图 图 像 可 
减 小 文件 大 小 ， 但 过 度 的 压缩 将 损坏 图 像 质量 。 可 以 检查 “发 布设 置 ” 对话 框 中 的 JPEG 
品质 设置 ， 确 保 未 过 度 压 缩 图 像 。 在 大 多 数 情况 下 ， 最 佳 做 法 是 将 图 像 表 示 为 失 量 图 形 。 
使 用 矢量 图 像 可 以 减 小 文件 大 小 ， 因 为 它 是 通过 计算 (而 非 通过 许多 像素 ) 产生 出 图 像 。 
在 保持 图 像 质量 的 同时 限制 图 像 中 的 颜色 数量 。 
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刀 将 _visible 属性 设置 为 “false”, 而 不 是 将 SWF 文件 中 的 _alpha 级 别 更 改 为 “0” 或 “1?” 。 
计算 舞台 上 实例 的 _alpha 级 别 将 占用 大 量 电脑 资源 。 如 果 禁 用 实例 的 可 见 性 ， 可 以 节省 
大 量 电脑 资源 ， 从 而 使 SWF 文件 的 动画 更 加 平滑 。 通常 无 须 印 载 和 重新 加 载 资源 ， 只 需 
将 _visible 属性 设置 为 “false”， 这 样 可 减少 对 电脑 资源 的 占用 。 

四 减少 在 SWF 文件 中 使 用 的 线条 和 点 的 数量 。 使 用 “最 优化 曲线 ”对 话 框 (选择 【修改 】 
人 形状 了 人 优化 】 命 令 可 打开 该 对 话 框 ) 来 减少 绘图 中 的 矢量 数量 。 选 择 “ 使 用 多 重 过 渡 ” 
选项 来 执行 更 多 优化 。 优化 图 形 将 减 小 文件 大 小 ， 但 过 度 压缩 图 形 将 损害 其 品质 。 优化 
曲线 可 减 小 文件 大 小 并 提高 SWF 文件 性 能 ， 可 采用 第 三 方 选 项 来 对 产生 不 同 结果 的 曲线 
和 点 进行 专门 优化 。 

7. 加 快 文档 显示 速度 

若 要 加 快 文档 的 显示 速度 ， 可 以 使 用 “视图 ”菜单 中 的 命令 关闭 呈现 品质 功能 ， 该 功能 需 
进行 额外 的 计算 ， 因 此 会 降低 文档 的 显示 速度 。 选 择 【 视图 ] /【 预览 模式 】 命 令 ， 再 从 以 下 
选项 中 进行 选择 。 

个 轮廓 : 只 显示 场景 中 形状 的 轮 廊 ， 从 而 使 所 有 线条 都 显示 为 细 线 。 这 样 就 更 容易 改变 图 
形 元 素 的 形状 以 及 快速 显示 复杂 场景 。 

从 快速 : 将 关闭 消除 锯齿 功能 ， 并 显示 绘画 的 所 有 颜色 和 线条 样式 。 

个 消除 锯齿 : 打开 线条 、 形 状 和 位 图 的 消除 锯齿 功能 并 显示 形状 和 线条 ， 从 而 使 屏幕 上 显示 
的 形状 和 线条 的 边沿 更 为 平滑 ， 但 绘画 速度 比 “ 快 速 ” 选 项 的 速度 要 慢 很 多 。 消除 锯齿 
功能 在 提供 数 千 (16 位 ) 或 上 百 万 (24 位 ) 种 颜色 的 显卡 上 处 理 效 果 最 好 。 在 16 色 或 
256 色 模 式 下 ， 黑 色 线 条 经 过 平滑 ， 但 是 颜色 的 显示 在 快速 模式 下 可 能 会 更 好 。 

刀 消除 文字 锯齿 : 平滑 所 有 文本 的 边缘 。 处 理 较 大 的 字体 大 小 时 效果 最 好 ， 如 果 文 本 数量 
太 多 ， 则 速度 会 较 慢 。 这 是 最 常用 的 工作 模式 。 

个 整个: 完全 呈现 三 台 上 的 所 有 内 容 。 可 能 会 减 慢 显 示 速 度 。 


经 验 一 筹 管 一 一 具体 优化 方法 


每 个 Flash 动画 需要 优化 的 内 容 不 一 样 ， 并 不 是 每 个 文档 均 需 要 以 上 的 优化 步骤 ， 一 般 加 快 文 
档 显示 速度 的 方法 是 每 个 Flash 文档 差不多 都 需要 使 用 的 。 


8.2.2 ”测试 动画 
在 发 布 和 导出 Flash 动画 之 前 ， 必 须 对 动画 进行 测试 ， 通 过 测试 可 以 检查 动画 是 否 能 正常 
播放 ， 播 放 效果 是 否 是 需要 的 效果 ， 并 检查 动画 中 是 否 有 明显 的 错误 ， 以 及 根据 模拟 不 同 的 网 
络 带宽 对 动画 的 加 载 和 播放 情况 进行 检测 ， 从 而 确保 动画 既 有 好 的 质量 ， 又 能 流畅 地 在 网 络 上 
播放 。 

本 例 将 打开 前 面 制作 的 “生日 贺卡 Ha” 动画 文档 ， 在 其 中 通过 模拟 下 载 输入 、 查 看 输入 
信息 和 预览 下 载 情况 等 操作 ， 对 动画 进行 测试 以 方便 后 期 优化 ， 其 具体 操作 如 下 : 


ol 


制作 并 发 布 交互 式 动画 


AGE 者 打开 文档 


打开 “生日 贺卡 fla" 动画 文档 。 选 择 [ 控制 ]/【 测 
试 影 片 ] /【 测试 】 命 令 ， 打 开动 画 测试 窗 口 。 


9 柄 
2 一。 为 了 方便 ， 在 测试 动画 时 ， 一 般 按 | 


Ctrl+Enter 组 合 键 ， 测 试 动画 。 
hh 


i 模拟 的 数据 流速 率 


在 测试 窗口 中 , 选择 [ 视图 ]/[ 下 载 设置 J/[ 自 
定义 ] 命 令 , 打开 “ 自 定义 下 载 设 置 ”对 话 框 。 
在 对 话 框 中 设置 下 载 速度 。 

2 单 击 EEEE 本 按钮。 


加 将 人 三 
| 在 测 让 动画 时 ， 为 了 消 四 不 同 网 过 
:的 用 户 ， 应 该 选择 低 网 速 进行 测试 。 


丁丁 两 吕 示 动画 相关 信息 

选择 [ 调试 ]/[ 列 出 对 象 命令 , 打开 “输出 " 面板。 
在 打开 的 “输出 "面板 中 将 显示 出 动画 的 相关 信息 ， 
并 对 语句 进行 调试 。 


AGER 0 用 品 示 动画 相关 信息 
选择 【 视图 ]/[ 宽带 设置 ] 命令 , 打开 “宽带 设置 ” 
窗口 ， 拖 动 滑 块 预览 下 载 效果 。 


:类 
作弄 入 一 一 一 i 
We 其 测 ， | 
| 试 效果 会 越 明显 。 | 
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8.2.3 设置 动画 发 布 格式 


在 Flash 中 设置 发 布 参数 ， 包 括 对 动画 的 发 布 格式 和 发 布 质量 等 进行 设置 ， 在 Flash 中 设 
置 动 画 发 布 格式 主要 有 Flash 输出 格式 、HTML 输出 格式 、GIF 输出 格式 、JPEG 输出 格式 和 


PNG 输出 格式 等 几 种 。 


选择 【文件 ] /【 发 布设 置 】 命令 ， 打 开 “ 发 布设 置 ” 对 话 框 ， 在 “格式 ”列表 框 中 可 选 
择 需 要 发 布 的 格式 ， 再 选中 相应 的 复 选 框 即 可 对 某 种 格式 进行 具体 设置 ， 如 选中 加 Fsh(si 复 
选 框 就 可 以 对 Flash 动画 的 版 本 、ActionScript 的 版 本 、 图 像 品 质 和 音频 质量 等 进行 设置 ， 下 面 


将 对 它们 的 参数 含义 进行 讲解 。 

如 SWF 文件 的 发 布设 置 选中 国 RGB 复 
选 框 ， 在 打开 的 窗口 中 可 以 对 发 布 后 Flash 
动画 的 版 本 、ActionScript 的 版 本 、 图 像 品 质 
和 音频 、swf 等 进行 设置 ， 其 中 还 包括 高 级 
的 相关 设置 。 


从 HTML 文档 的 发 布设 置 : 在 Web 浏览 器 中 
播放 Flash 内 容 需 要 一 个 能 激活 SWF 文件 并 
指定 浏览 器 设置 的 HTML 文档 。HTML 参数 
包括 在 窗口 中 的 位 置 、 背 景 颜色 和 SWF 文件 
大 小 等 属性 。 


1 经 验 一 筹 乱 一 一 指定 用 于 Flash Player 检测 的 发 布设 置 


若 要 在 允许 浏览 器 查看 使 用 以 下 模板 的 SWF 文件 之 前 检测 是 否 存在 Flash Player， 请 创建 一 个 
自身 带 有 SWF 文件 的 单独 HTML 页 ， 以 便 先 检测 Flash Player 再 将 浏览 器 定向 到 包含 Flash 内 


容 的 HTML 页 。 


LO 
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.GIF 图 像 的 发 布设 置 GIF 提供 了 一 种 简 ” 丰 PNG 图 像 的 发 布设 置 : PNG 是 唯一 支持 
单 的 方法 来 导出 简短 的 动画 序列 。Flash 可 以 透明度 (Alpha 通道 ) 的 跨 平台 位 图 格式 。 
优化 GIF 动画 文件 ， 并 且 只 存储 逐 帧 更 改 ， 它 也 是 用 于 Adobe Fireworks 的 本 机 文件 格 
在 GIF 选项 卡 中 可 以 对 GIF 图 像 文件 的 大 小 、 ” 式 .。 在 PNG 选项 卡 中 可 以 对 PNG 图 像 文件 
左 色 等 属性 进行 设置 。 的 大 小 、 品 质 等 属性 进行 设置 。 


可 和 文件 (| 中 让 - EEC | 
Wns i A 


记 - 人 
aha) si 
we 大 小 区 2 本 片 罗 
守 WW): p22 人 素 
Ld 


8.2.4 预览 发 布 效果 


在 “发 布设 置 ”对 话 框 中 对 动画 的 发 布 格式 进行 设置 后 ， 在 正式 发 布 之 前 还 可 以 对 即将 
发 布 的 动画 格式 进行 预览 ， 以 确定 发 布设 置 是 否 合适 。“ 发 布 预览 ”命令 会 导出 文件 ， 并 在 
默认 浏览 器 上 打开 预览 。 如 果 预 览 QuickTime 视频 ， 则 “发 布 预览 ”会 启动 QuickTime Video 
Player。 如 果 预 览 放 映 文件 ，Flash 会 启动 该 放映 文件 。 下 面 分 别 对 预览 Flash 动画 和 预览 
HTML 文档 的 方法 进行 介绍 。 


从 预览 Flash 动画 : 选择 【文件 】/【 发 布 预 ”大 预览 HTML 文档 : 选择 【文件 〗/【 发 布 预 
览 】/【Flash] 命令， 打开 swf 测试 窗口 。 览 ]/【HTML] 命令 , 打开 HTML 测试 窗口 。 
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8.2.5 ”发 布 动画 

设置 好 动画 发 布 属性 并 预览 后 ， 如 果 预 
览 动画 效果 满意 ， 就 可 以 将 动画 发 布 了 ， 发 
布 动画 的 方法 可 以 直接 选择 【文件 】/【 发 
布 】 命令 ， 也 可 以 在 “发 布设 置 ”窗口 中 单 
击 攻 王 可 按钮 发 布 动画 。 发 布 动画 后 在 发 布 
文件 所 在 的 目录 中 可 浏览 发 布 的 文件 ， 如 右 
图 所 示 。 


8.2.6 ”导出 动画 


Flash 还 可 以 导出 多 种 格式 的 影片 ， 除 了 前 面 提 到 的 发 布 格 式 外 ， 还 可 以 导出 为 avi 格式 
的 影片 。 打 开 要 导出 的 Flash 文档 , 选择 【文件 ]/ 导出 】/【 导出 影片 ] 命 令 , 打开 “导出 影片 ” 
对 话 框 ， 输 入 文件 的 名 称 ， 选 择 文件 格式 ， 最 后 单 击 EEesa 按 钮 即 可 。 


8.2.7 导出 图 像 


Falsh CS6 可 导入 的 图 像 格 式 有 swf、jpg、png、pxg 和 gif 等 。 导 出 方法 和 导出 动画 类 似 ， 
选择 【文件 】/【 导出 】/【 导出 图 形 】 命 令 ， 在 打开 的 “导出 图 像 ”对 话 框 中 设置 参数 即 可 。 


加 上 NE 优化 并 发 布 “ 爱 ”动画 
饼 巩固 优化 动画 对 象 的 操作 方法 。 


， 进一步 掌握 动画 的 测试 和 发 布 方法 。 jh 


本 例 将 对 “ 爱 la” 动 画 进行 优化 ， 使 动画 更 加 完美 、 播 放 效 果 更 加 流畅 ， 完 成 后 的 最 终 
效果 如 下 图 所 示 。 
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AAA 二 打开 动画 文档 

打开 “ 爱 fa” 动画 文档 ， 打 开 “ 库 ”面板 ， 在 面 
板 中 新 建 一 个 名 为 “元 件 ” 的 文件 夹 ， 再 将 所 有 
元 件 都 移动 到 该 文件 夹 中 。 


相 铝 个 本 二 . 
| 将 文档 中 的 元 件 分 类 ， 能 使 再 次 编 
| 辆 动 画 时 更 方便 。 


SEED5 昌 出 除 无 用 的 图 像 


1 在 “ 库 ” 面 板 中 选择 需 删除 的 图 像 ， 这 里 选 
择 “104.jpg” 图 像 。 
2.， 单 击 “ 库 ”面板 下 的 看 按钮 ， 删 除 图 像 。 


Er :类 ia 1 
ee 单 击 筷 标 右键 ， | 
| 出 的 快捷 菜单 中 选择 “删除 ”命令 ， 也 可 | 


a a Be 


丁丁 设计 声 音 属性 

1， 选择 “有 多 少 爱 可 以 重 来 音频 ， 单 击 
鼠标 右键 ,在 弹出 的 快捷 菜单 中 选择 * 属 
性 ” 命令， 在 打开 的 “声音 属性 "对 话 
框 中 设置 “压缩 ”为 “MP3”。 

2 单 击 EEBE 可 按钮 。 


EE 

rt [本 
Se 
oni sl 

cept hh 人 声 直 位 235 圳 AS4 起 


EE 设置 声 音 栓 出 

1.， 选择 【文件 ]/【 发 布设 置 】 命令 , 打开 “发 
布设 置 ”对 话 框 。 选 中 加 Feshfsw 复 选 框 。 

2.， 设置 “脚本 、JPEG 品质 ”为 “ActionScript 
3.0、70" 。 
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”i 天 
Eis CE Wi 首 十 “ 立 ， 
下 ER 1 在 “发 布设 置 ”对 话 框 中 单 击 “音频 流 ” 后 
家 外 理 : a ED 的 热 文本 ， 在 打开 的 “声音 设置 ”对 话 框 中 
thle EE 设置 “比特 率 、 品质 ”为 “16kbps、 快 速 ”。 
人 2， 单 击 [EEE 本 按钮 。 
(J 设 冒 ) 


EE 发 布 动 本 
在 返回 的 “发 布设 置 ” 对 话 框 中 单 击 苇 济 四 j 按 钮 ， 
发 布 动画 ， 之 后 即 可 在 发 布 保存 目录 中 查看 到 发 
布 的 Flash 文件 。 


二 和 
呈 苍 如 
> 
蒜 
曾 世 | 
困 
本 

pe 
全 
藻 滋 
避风 | 
将 | 

2 
Ew | 
你 号， 
栅 。 | 


| 所 以 这 里 发 布 动画 之 后 有 SWF 格式 的 文件 。 


8.3 练习 1 小 时 


本 章 主要 介绍 了 Flash 动画 的 优化 和 发 布 方法 ， 用 户 要 想 在 日 常 工作 中 熟练 使 用 它们 ， 还 
需 进 行 巩固 练习 。 下 面 以 制作 游戏 开场 动画 为 例 ， 进 一 步 巩固 这 些 知 识 的 使 用 方法 。 


制作 游戏 开场 动画 


本 例 将 制作 游戏 开场 动画 ， 并 为 动画 添加 
fly.WAV 声音 。 通 过 本 例 主 要 掌握 Flash 制作 游 
戏 的 基本 方法 以 及 优化 和 发 布 动画 的 方法 ， 其 
最 终 效果 如 右 图 所 示 。 


在 Photoshop 中 制作 
网 页 主体 界面 


军 


学 习 了 4 时 ; ®@ Photoshop 的 基础 知识 
ooessososessossassssssassseosoosssossess O MSM 1 
图 像 不 仅 可 以 使 网 页 内 容 更 加 丰富 ,更 能 体 ; 。 全 dt 站 标志 绘制 
现 网 页 的 风格 与 特色 ， 是 网 页 制作 人 员 设 计 网 页 : 全 


时 必须 考虑 与 处 理 的 内 容 。 而 Photoshop 作为 目前 ;制作 网 页 文本 
使 用 人 数 最 多 、 功 能 最 丰富 的 图 形 图 像 软件 之 一 ，: ® 网 页 切片 输出 
受到 了 广大 用 户 的 青睐 。 在 Photoshop 中 用 户 可 。 
以 制作 出 任何 需要 的 图 像 ， 还 可 进行 页 面 布局 并 和 候 千 
导出 图 片 为 网 页 中 可 用 的 格式 。 : 
上 机 小 时 


Hours 
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9.1 ”Photoshop 的 基础 知识 


Photoshop 是 专业 的 图 像 制 作 与 处 理 软件 ， 在 网 页 设计 中 也 占有 很 重要 的 地 位 。 使 
Photoshop 不 仅 可 以 制作 网 页 中 使 用 的 任何 图 像 ， 还 可 进行 网 页 布局 以 及 将 图 片 导出 为 网 页 中 
可 用 的 图 像 格式 等 ， 在 学 习 使 用 Photoshop 处 理 图 像 前 需 先 了 解 Photoshop 的 基础 知识 。 


目 IEEEZI------ 


， 快速 认识 Photoshop 的 工作 界面 。 a 熟练 掌握 Photoshop 的 基础 操作 。 
| 令 掌握 使 用 辅助 工具 编辑 图 像 的 方法 。 


9.1.1 Photoshop CS6 的 工作 界面 


启动 Photoshop CS6 后 所 打开 的 窗口 就 是 其 工作 界面 ， 该 工作 界面 主要 由 菜单 栏 、 窗 口 控 
制 按钮 、 工 具 属性 栏 、 工 具 箱 、 面 板 组 和 图 像 窗口 等 组 成 。 


菜单 栏 窗口 控制 按钮 
工具 属性 栏 
面板 组 
工具 箱 一 一 揣 G@)G) 


出 


WA 


图 像 窗 口 


Photoshop CS6 工作 界面 中 各 部 分 作用 如 下 。 

如 菜单 栏 : 菜单 栏 集合 了 该 软件 中 的 各 种 应 用 命令 , 从 左 至 右 依次 为 文件 、 编辑 、 图 像 、 图 层 、 
文字 、 选 择 、 滤 镜 、3D、 视 图 、 窗 口 和 帮助 11 个 菜单 ， 用 户 只 需要 了 解 各 菜单 中 命令 的 
特点 ， 就 能 够 很 容易 地 掌握 这 些 菜单 中 的 命令 。 

人 窗口 控制 按钮 :菜单 栏 后面 有 一 排 按 钮 ， 可 用 于 窗口 大 小 的 缩放 和 还 原 ， 依 次 单 击 国有 、 
加 、 加 和 国 于 按钮 可 最 小 化 、 最 大 化 、 还 原 和 关闭 窗口 。 

从 工具 属性 栏 : 在 工具 箱 中 选择 某 个 工具 后 ， 菜 单 栏 下 方 的 工具 属性 栏 就 会 显示 当前 工具 对 
应 的 属性 和 参数 ， 用 户 可 以 通过 设置 这 些 参数 来 调整 工具 的 属性 。 在 工具 箱 中 选择 不 同 的 
工具 后 ， 工 具 属 性 栏 中 的 各 参数 选项 也 会 随 着 当前 工具 的 改变 而 变化 。 


在 Photoshop 中 制作 网 页 主体 界面 医生 


如 工具 箱 : 工具 箱 中 集合 了 图 像 处 理 过 程 中 需要 经 常 使 用 的 工具 ， 使 用 它们 可 以 进行 绘制 图 
像 、 修 饰 图 像 、 创 建 选区 以 及 调整 图 像 显 示 比 例 等 操作 。 

个 面板 组 : 面板 组 是 在 Photoshop CS6 中 进行 颜色 选择 、 图 层 编辑 、 通 道 新 建 、 路 径 编辑 和 
编辑 撤销 等 操作 的 一 些 功能 面板 ， 是 Photoshop CS6 中 重要 的 组 成 部 分 。 这 些 面板 集合 显 
示 在 工作 界面 右 侧 ， 统 称 为 面板 组 。 

所 图 像 窗口 : 图 像 窗口 是 对 图 像 进行 浏览 和 编辑 操作 的 主要 区 域 ， 它 主要 由 标题 栏 、 图 像 纺 
辑 区 和 状态 栏 组 成 。 其 中 标题 栏 主要 显示 当前 图 像 文 件 的 文件 名 称 、 文 件 格式 、 显 示 比 例 
和 图 像 色彩 模式 等 信息 ; 图 像 编辑 区 用 于 显示 当前 浏览 或 编辑 的 图 像 ， 是 进行 图 像 编辑 和 
处 理 的 场所 ; 状态 栏 位 于 图 像 窗口 的 底部 ， 状 态 栏 最 左 侧 显示 当前 图 像 窗 口 的 显示 比例 。 


9.1.2 “Photoshop CS6 的 基本 操作 


在 认识 Photoshop CS6 的 操作 界面 后 ， 用 户 就 可 以 使 用 Photoshop 处 理 图 像 了 。 但 
Photoshop 的 功能 强大 ， 所 以 用 户 在 处 理 图 像 前 还 需要 学 会 关于 Photoshop 的 基础 操作 ， 义 
建 图 像 、 打 开 图 像 、 设 置 图 像 大 小 和 画布 大 小 、 旋 转 与 裁剪 图 像 、 复 制 和 粘贴 图 像 以 及 移动 图 
像 等 。 下 面 就 对 它们 的 操作 方法 进行 讲解 。 


水 中 


1. 新 建 图 像 
在 Photoshop CS6 中 可 以 根据 需要 新 建 - i -| Fs 
一 个 图 像 ， 并 为 新 建 的 图 像 设 置 名 称 、 宽 0 : er 


WWD) 


度 、 高 度 和 分 辨 率 等 信息 。 其 方法 是 ， 启动 
Photoshop CS6, 选择 【文件 ]/【 新建 ] 命令 ， 


于 到 模式 (M)，R63 着 B。 ~ 


打开 “新 建 ” 对 话 框 ， 如 右 图 所 示 。 在 该 对 HE(O: 握 双 


话 框 中 对 名 称 、 宽 度 、 高 度 、 分 辨 率 和 颜色 于 
模式 等 设置 后 , 单 击 C 一 按钮 ,完成 新 建 。 Hemme aa 


| 多 于 长 要 比 (X)， 方 允 从 来 


2. 打开 图 像 
要 对 已 有 的 图 像 进行 编辑 需要 先 打 开 图 像 ，Photoshop CS6 中 打开 图 像 的 方法 有 多 种 ， 可 
通过 拖 动 文件 图 标 、 右 键 快捷 菜单 、 菜 单 命令 和 最 近 使 用 过 的 文件 打开 ， 分 别 介绍 如 下 。 

天 通过 拖 动 文件 图 标 打 开 : 启动 Photoshop CS6， 在 电脑 中 选择 需要 打开 的 图 像 文 件 图 标 ， 
将 该 图 像 文件 图 标 拖 动 至 Photoshop CS6 工作 界面 中 即 可 。 

如 通过 右键 快捷 菜单 打开 : 在 需要 打开 的 图 像 上 单 击 和 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 

【打开 方式 】/【Adobe Photoshop CS6】 命令 即 可 。 如 果 图 像 文件 为 PSD 格式 ， 则 可 直接 

双击 打开 ， 而 不 必 选 择 打开 的 方式 。 

个 通过 菜单 命令 打开 : 启动 Photoshop CS6， 按 Ctrl+O 组 合 键 或 选择 【文件 】/【 打 开 】 命 令 ， 
打开 “打开 ”对 话 框 ， 在 其 中 选择 需要 打开 的 图 像 文件 ， 单 击 医 王 @ 加 按钮 即 可 。 

如 通过 最 近 使 用 过 的 文件 打开 : 选择 【文件 】/【 最 近 打 开 文件 】 命 令 ， 在 弹出 的 菜单 中 将 
显示 最 近 在 Photoshop 中 打开 过 的 10 个 文件 ， 选 择 需 打 开 的 文件 即 可 。 
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1 经 验 一 筹 能 一 一 关闭 图 像 的 方法 


在 编辑 完 图 像 后 还 需要 关闭 图 像 ， 关闭 图 像 的 方法 是 : 单 击 图 像 窗 口 右 上 角 的 莉 加 按钮 、 选 择 【 文 
件 】〗»/【 关 闭 】〗 命 令 或 按 Ctrl+W 组 合 键 即 可 。 


3. 设置 图 像 大 小 和 画布 大 小 

图 像 和 画布 都 具有 宽度 和 高 度 ， 它 们 决定 着 图 像 和 画布 的 大 小 。 可 将 画布 理解 为 绘画 时 使 
的 画板 ， 而 图 像 则 是 画板 上 的 绘画 作品 。 下 面 分 别 介绍 设置 图 像 大 小 和 画布 大 小 的 方法 。 

(1) 设置 图 像 大 小 

在 网 页 中 使 用 的 图 像 往往 有 一 定 的 限 


制 ， 如 尺寸 和 分 辨 率 。 为 了 满足 用 户 的 制作 a 
需要 ,可 对 图 像 大 小 进行 适当 调整 其 方法 是 mo | 
选择 【图 像 ] /【 图 像 大 小 命令， 打开“ 图 

像 大 小 ”对 话 框 ， 在 其 中 选中 国 纺 样式 (Y) 、 CE CE 


回 约束 比例 [C) 和 回 重 定 图 多 像素 00: 复 选 框 。 在 “像素 Ed 
大 小 ” 栏 的 “宽度 ”或 “高 度 ” 文 本 框 中 输 
入 需要 的 大 小 数值 后 单 击 ER 按钮 ， 如 
右 图 所 示 。 


(2 ) 设置 画布 大 小 

图 像 画 布 大 小 指 的 是 当前 图 像 周围 工作 空间 的 大 小 ， 当 图 像 周围 的 空间 太 密 集 或 太 大 时 ， 
可 对 画布 大 小 进行 设置 。 其 方法 是 : 选择 【 图 
像 ] /人 【 画布 大 小 】 命 令 ， 打 开 “ 画 布 大 小 ” SR 
对 话 框 ， 如 右 图 所 示 。 在 “宽度 ”和 “高 度 ” me: 0 
文本 框 中 输入 画布 的 尺寸 ， 并 在 其 后 的 下 拉 
列表 框 中 选择 需要 的 单位 。 然 后 在 “定位 ” 
栏 中 设置 画布 扩展 方向 , 在 “画布 扩展 颜色 ” 
下 拉 列 表 框 中 选择 一 种 颜色 作为 周围 空间 的 
填充 色 ， 完 成 后 单 击 臣 融 喇 按钮。 此 时 将 
打开 提示 对 话 框 ， 单 击 世 同 @ 可 按钮 即 可 完 
成 操作 。 


4. 旋转 与 裁剪 图 像 
图 像 用 不 同 的 角度 可 以 展示 出 不 同 的 效果 ， 且 当 用 户 想 展示 特写 镜头 时 ， 将 多 余 不 需要 的 
图 像 区 域 裁剪 掉 是 个 不 错 的 选择 。 在 Photoshop 中 用 户 可 以 随意 对 图 像 的 方向 和 大 小 进行 设置 ， 
下 面 将 分 别 进行 介绍 。 

(1) 旋转 图 像 

对 图 像 进行 旋转 是 指 将 整个 画布 大 小 一 起 旋转 , 其 方法 是 : 选择 [ 图 像 ]/[ 图 像 旋转 ] 命 令 ， 
在 弹出 的 子 菜单 中 选择 需要 旋转 的 角度 即 可 , 包括 180?、 顺 时 针 90° 、 逆 时 针 90 、 任 意 角度 、 
水 平 翻转 和 垂直 翻转 几 个 命令 。 如 下 图 所 示 即 为 选择 “任意 角度 ”命令 后 在 打开 的 对 话 框 中 设 
置 旋 转角 度 后 的 效果 。 


(2 ) 裁剪 图 像 和 一 
当 不 需要 图 像 中 的 某 部 分 内 容 时 ， 为 了 图 像 的 整洁 可 对 图 像 进行 裁剪 操作 ， 并 且 在 裁剪 过 273 
程 中 还 能 对 图 像 进行 旋转 操作 ， 使 裁剪 后 的 图 像 效 果 更 加 符合 需要 。 在 工具 箱 中 选择 “裁剪 工 7 
具 ” 国 ， 此 时 图 像 周 围 将 出 现 黑色 的 网 格 线 ， 将 鼠标 放 在 图 像 四 周 的 任意 控制 点 上 ， 按 住 拖 动 we 
鼠标 到 需要 保留 的 位 置 ， 按 Enter 键 确认 裁剪 ， 如 下 图 所 示 。 


Hours 


小 
将 图 像 粘贴 到 另 一 张 图 像 中 ， 可 使 图 像 效 果 更 加 丰富 、 有 创意 。 复 制 和 粘贴 图 像 的 方法 很 
简单 ， 其 方法 分 别 介绍 如 下 。 
打开 需要 复制 的 图 像 ， 在 要 复制 的 图 像 中 按 Ctrl+A 组 合 键 选择 图 像 ， 选 择 【 编 
辑 】/【 拷 贝 】 命 令 或 按 CtrlHC 组 合 键 。 22 
机 打开 需要 粘贴 的 图 像 ， 选 择 【〖 编 辑 】/【 粘 贴 】 命 令 或 按 CtrltV 组 合 键 。 
除 使 用 复制 和 粘贴 的 方式 创作 新 图 像 外 ， 用 户 还 可 以 通过 “移动 工具 ” 国 创 作 新 图 像 。 
在 Photoshop 中 通过 “移动 工具 ” 国 可 以 移动 图 像 中 的 某 个 部 分 ， 也 可 以 将 图 像 拖 动 到 另 一 个 
文档 中 ， 其 方法 分 别 介 绍 如 下 。 De 
2 在 工具 箱 中 选择 “移动 工具 ” 国 ， 在 图 像 编辑 区 中 单 击 并 拖 动 | 
息 标 即 可 移动 该 图 像 。 


Hour 
A 
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从 在 不 同 的 文档 之 间 移 动 图 像 : 打开 两 个 或 两 个 以 上 的 文档 ， 选 择 需要 移动 的 图 像 ， 再 使 用 
“移动 工具 ” 国 单 击 图 像 并 拖 动 鼠 标 至 另 一 个 图 像 中 的 图 像 编 辑 区 后 释放 鼠标 即 可 。 


9.1.3 ”使 用 “辅助 ”工具 
为 了 提高 工作 效率 ， 在 进行 图 像 编辑 之 前 ， 可 以 先 掌握 “ 辅 肋 ” 工 具 的 用 法 ,如 “标尺 ”、 
"参考 线 ” 和 “网 格 ”工具 等 ， 下 面 分 别 对 它们 的 使 用 方法 进行 介绍 。 


1. 使 用 标尺 和 参考 线 

Photoshop 中 的 标尺 与 日 常生 活 中 使 用 的 直 尺 功能 相似 , 即 对 对 象 的 长 度 或 宽度 进行 度量 。 
参考 线 则 是 一 种 辅助 定位 的 工具 ， 在 合适 的 位 置 添加 一 些 线条 ， 然 后 以 这 些 线条 作为 参考 进行 
图 像 的 定位 等 操作 。 


(1) 标尺 

在 Photoshop 中 ， 通 过 “标尺 工具 ” 
可 以 帮助 用 户 掌握 图 像 的 长 度 和 宽度 信 
息 ， 还 可 以 根据 需要 更 改 标 尺 的 计量 单位 。 
其 显示 方法 是 : 打开 图 像 后 , 选择 [ 视图 MA[ 标 
尺 】 命令 或 按 Ctrl+R 组 合 键 ，Photoshop CS6 
将 在 图 像 窗口 的 上 方 和 左 侧 显示 标尺 刻度 ， 
然后 将 鼠标 光标 移动 到 窗口 顶部 或 左 侧 标尺 
上 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 还 
可 修改 标尺 的 计量 单位 ， 如 右 图 所 示 。 


〈2 ) 参考 线 

参考 线 是 浮动 在 图 像 上 的 直线 ， 分 为 水 
平 参考 线 和 垂直 参考 线 ， 它 们 仅 为 设计 
者 提供 位 置 参考 ， 在 打印 或 导出 时 ， 都 不 会 
出 现 。 其 创建 方法 是 : 打开 图 像 ， 选 择 【 视 
玖 ]/ 新 建 参考 线 】 命 令 , 打开 “新建 参考 线 " 
对 话 框 ， 在 “取向 ” 栏 中 选中 @x*p(m 或 盏 要 直 () 
单 选 按钮 。 在 “位 置 ” 文 本 框 中 输入 插入 的 
位 置 。 单 击 EEE 汪 按钮 完成 参考 线 的 创建 。 
如 右 图 所 示 为 插入 一 条 水 平 参考 线 的 效果 。 


在 Photoshop 中 制作 网 页 主体 界面 


2. 网 格 

格 主 查看 图 像 的 透视 关系 ， 
以 及 图 像 中 对 象 的 位 置 距离 。 其 显示 方法 
是 : 打开 需要 观察 的 图 像 , 选择 [ 视图 人 【 显 
示 】/【 网 格 】 命 令 ， 或 按 Ctrlt+， 组 合 键 ， 
可 以 显示 网 格 ， 如 右 图 所 示 。 


国 目 国光 和 四 用 > 制作 “奖品 展示 ”图 像 275 
巩固 Photoshop 的 基本 操作 方法 。 Fee 
& 进一步 掌握 使 用 辅助 工具 制作 图 像 的 方法 。 

本 例 将 新 建 一 个 Photoshop 图像 ,并 设置 其 大 小 以 及 背景 色 ,再 在 其 中 显示 标尺 绘制 辅助 线 ， Ie 
利用 辅助 线 确定 添加 素材 图 像 的 位 置 ， 完 成 后 的 最 终 效果 如 下 图 所 示 。 wx 
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新 建文 档 人 一 5 
启动 Photoshop CS6， 选 择 【 文件 ]/【 新 建 】 _ 
命令 , 打开 “新 建 ” 对 话 框 ， 在 其 中 分 别 设置 


宾 度 (W)}: 800 -~ 村 
“名 称 、 宽 度 、 高 度 、 分 辩 率 、 背景 内 容 " 为 “ 奖 aa - 
品 展示 、800 像素 、500 像素 、96 像素 /英寸 、 a . 
白色 ”。 节录 了 EC 白色 -~ | a % 


2 单 击 ER 按钮 。 


人 HO): 方 入 于 


12 
Hour: 
全 


[72 小 时 精通 | 


SMERIOZ: 


1. 按 Alt+Delete 组 合 键 ， 使 用 前 景色 填充 。 按 
Ctrl+R 组 合 键 ， 显 示 标尺 。 

2 选择 【视图 ] /【 新 建 参考 线 ] 命令 , 打开 “ 创 
建 参考 线 ” 对 话 框 。 选 中 回 委 直 (y) 单 选 按钮 ， 
设置 "位 置 " 为 “2 厘米" 。 单 击 EEEBE 按钮 。 


3， 使 用 相同 的 方法 分 别 在 8 厘米 、14 厘米 、 20 ”图 2 
厘米 的 位 置 上 创建 三 条 垂直 辅助 线 。 5 ee- 


司 重 直 (V) 


(Py 7 | (2 有 设置 


线 都 清除 。 此 外 ， 用 户 车 起 将 菜 
SR 人 和 鼠标 拖 动 要 清除 的 参 


STEP 03: 
打开 “背景 .png” 图 像 ， 在 工具 箱 中 选择 “移动 
工具 ” 国 。 使 用 鼠标 单 击 “背景 ”图 像 并 拖 动 鼠 
标 至 "奖品 展示 " 图 像 中 的 图 像 编辑 区 后 释放 鼠标 ， 
将 “背景 ”图 像 移动 “奖品 展示 ”图 像 中 。 


STEP 04: 


选择 【 窗口 ] /【 图 层 】 命令 , 打开 “图 层 ” 面 板 。 
在 其 中 设置 “不 透明 度 ” 为 “40%”。 


给 本 步 操作 是 修改 图 层 的 不 透明 度 ， 
使 图 像 变 得 透明 。 关 于 图 层 的 相关 知识 将 在 第 
10 章 中 进行 讲解 。 


在 Photoshop 中 制作 网 页 主体 界面 


本 本 本 二 添加 素材 

打开 “1.png” 图 像 ， 使 用 “移动 工具 " 图 将 其 移 
动 到 “奖品 展示 ”图 像 中 ， 并 放置 在 左边 第 一 条 
参考 线 上 。 按 Ctr+T 组 合 键 ， 当 出 现 黑色 网 格 后 ， 
将 鼠标 移动 到 图 像 右 下 角 , 并 向 上 拖 动 ,旋转 图 像 
使 用 相同 的 方法 编辑 添加 其 他 素材 。 


2 按 CtltT 组 合 键 后 ， 除 了 可 以 旋转 | 
图 像 外 ， 还 可 以 缩放 图 像 。 其 方法 是 : 出 现 黑 


色 网 格 后 ， 使 用 鼠标 拖 动 图 像 的 四 个 角 即 可 


和 
277 
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9.2 ”绘制 与 编辑 图 像 


使 用 Photoshop 编辑 图 像 时 ， 可 对 图 像 进行 绘制 、 编 辑 和 填充 颜色 。 下 面 就 将 讲解 绘制 、 吕 
编辑 图 像 与 填充 颜色 的 一 些 方法 。 -"《 


BEE ------ 


QQ 了 解 各 种 颜色 的 选取 方法 。 熟练 掌握 使 用 工具 绘制 形状 的 方法 。 pa 


I 
1 入 进一步 掌握 使 用 渐变 工具 的 方法 。 
[中 


9.2.1 颜色 的 选取 方法 An 
绘制 图 像 需 要 先 设 置 画笔 的 颜色 ， 在 Photoshop CS6 中 可 以 通过 

色 器 、“ 豚 管 工具 ” 国 、“ 颜 色 ” 面 板 和 “ 色 板 ”面板 等 进行 设置 。 选 

取 颜 色 后 ， 用 户 可 以 直接 在 工具 箱 中 查看 设置 的 前 景色 和 背景 色 。 要 在 

Photoshop CS6 中 绘制 图 形 ， 都 需 设 置 需要 的 前 景色 和 背景 色 。 前 景色 


bal 


于 显示 当前 绘制 图 像 的 颜色 ， 背 景色 则 用 于 显示 图 像 的 底 色 ， 也 就 是 画 5 
布 的 颜色 。 工 具 箱 中 的 对 色 块 分 别 代表 前 景色 选择 框 和 背景 色 选 择 框 ， 背景 色 从 
如 果 右 图 所 示 ， 单 击 它们 即 可 设置 前 景色 和 背景 色 。 在 Photoshop 中 常 


的 颜色 选取 方法 有 以 下 几 种 。 


让 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


公使 用 “ 拾 色 器 ”对 话 框 : 拾 色 器 即 拾取 颜 
色 的 工具 ， 在 其 中 用 户 可 以 通过 颜色 模型 
或 根据 颜色 的 十 六 进 制 值 来 指定 颜色 。 其 
使 用 方法 是 : 单 击 工具 箱 中 的 前 景色 或 背景 
色 选 择 框 ， 打 开 如 下 图 所 示 的 拾 色 器 ， 在 色 
值 栏 中 输入 需要 的 颜色 数值 ， 或 在 颜色 区 域 
中 使 用 鼠标 单 击 选择 需要 的 颜色 ， 最 后 单 
击 ER 按钮 。 


接 反 莫 (前 晤 包 ) 


和 


口 只 有 we 地 


但 使 用 “颜色 ”面板 : “颜色 ”面板 位 于 工 
区 右 侧 的 面板 组 中 ， 可 以 通过 它 设置 颜色 
的 RGB 值 . 其 使 用 方法 是 : 选择 【窗口 1V 闫 
色 】 人 命令， 打开“ 颜色” 面板 ， 在 “R、G、B” 
数值 框 中 直接 输入 需要 的 数值 或 拖 动 滑 块 设 
置 RGB 颜色 值 ， 也 可 以 使 用 鼠标 在 下 方 的 色 
条 上 单 击 ， 快 速 获取 前 景色 。 


9.2.2 ”使 用 形状 工具 组 绘制 图 像 


人 使 用 “吸管 工具 ” 国 : 使 用 “吸管 工具 ” 
可 以 快速 获取 已 打开 图 像 中 的 某 一 部 分 颜色 。 
其 操作 方法 是 打开 图 像 ,在 工具 箱 中 选择 “ 吸 
管 工 具 ” 甘 ， 将 鼠标 光标 移动 到 图 像 所 需要 
颜色 处 单 击 ， 工 具 箱 中 前 景色 就 会 变 成 鼠标 
单 击 处 的 颜色 。 


户 使用“ 色 板 ” 面 板 : “ 色 板 ”面板 位 于 工 
作 区 右 侧 的 面板 组 中 ， 选 择 【 窗 口 ]/【 色 板 】 
命令 可 打开 “ 色 板 ”面板 ,将 鼠标 放 在 色 板 中 
当 和 鼠标 光标 变 为 4 形状 时 ， 在 面板 中 单 击 相 
应 的 颜色 块 即 可 获取 前 景色 。 


使 用 Photoshop CS6 制作 网 页 主题 界面 时 ， 还 能 


制 具 有 一 定 规格 的 图 形 。 形 状 


具 组 包括 “和 拢 形 工具 ” 国 、“ 贺 角 矩 形 


形状 工具 组 给 


工具 ”图 、“ 椭 加 


定形 状 工具 ” 国 等 ， 如 右 图 所 示 。 


这 些 形状 工具 的 使 


具 ” 图 、“ 多 边 形 工具 ”图 、 “直线 工具 ”图 以 及 “ 自 
方法 基本 相同 ， 下 面 就 以 使 用 形状 工具 组 中 的 各 形状 了 


户 登 录 界 


”图 像 为 例 进行 介绍 ， 其 具体 操作 如 下 : 


第 9 章 


STEP 01: 

1. 打开 “登录 界面 背景 jpg” 图 像 。 在 工具 箱 中 
单 击 “ 前 景色 ” 色 块 。 

2. 打开 “ 拾 色 器 ( 前 景色 ) ”对 话 框 ， 在 颜 
栏 中 选择 “白色 ”。 

3 单 击 EEERE29 按 钮 。 


[从 


[IT 习 


2) 单 击 


“ 拾 色 器 ”对 话 框 的 名 字 将 会 根据 用 279 
户 选择 的 对 象 不 同 而 改变 。 


六 


1R 有 Web Wi FH 


STEP 02: 

1.， 在 工具 箱 中 选择 “ 圆 角 和 矩形 工具 ” 国 

2.， 在 工具 属性 栏 中 设置 “工具 模式 、 不 透明 度 、 
半径 ”为 “像素 、40%、10 像素 " 。 

3.， 使 用 鼠标 在 图 像 中 拖 动 鼠标 绘制 一 个 矩形 。 


Hours 


侈 主 ee “工具 模式 ”可 
以 让 用 户 自 由 地 设置 绘制 对 象 的 属性 格式 。 而 
“半径 ” 则 用 于 设置 圆 角 矩形 的 圆 角 度 。 


Hourg 


STEP 03: 


1. 将 前 景色 设置 为 “灰色 ( #939393 ) ”, 选择 " 矩 
EB 工具 ” 国 。 

2.， 使 用 鼠标 在 之 前 绘制 的 圆 角 矩形 上 绘制 两 个 
灰色 的 矩形 。 

3 将 前 景色 设置 为 “橙色 ( #iae00 ) ”， 再 在 
属性 面板 中 设置 “不 透明 度 ” 为 “50%”。 
4.， 按 住 Shift 键 的 同时 ， 使 用 鼠标 拖 动 在 白色 的 
贺 角 矩形 边 上 绘制 一 个 正方 形 。 


Hours 


Hourg 


Hour 唱 
在 制作 网 页 界面 时 ， 往 往 需要 将 绘制 的 形状 固定 为 某 一 标准 。 此 时 ， 用 户 可 在 形状 工具 的 工具 
属性 栏 中 单 击 国 按钮 ， 在 弹出 的 下 拉 列 表 中 选中 国 要 于 有 单 选 按钮 ， 再 在 其 后 的 “W、H” 文 本 
框 中 输入 需要 的 大 小 值 。 


Houra 


二 习 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


we 使 用 直线 工具 


线 工具 ”图 。 


为 “50%、2 像素 ”。 


复 选 框 。 


绘制 一 个 带 箭头 的 直线 。 


wi 使 用 椭圆 工具 


具 ' 国 。 


2. 在 工具 属性 栏 中 分 别 设置 “不 透明 度 、 粗 细 ” 


梅 前 
2. 在 工具 属性 栏 中 设置 “不 透明 度 ” 为 “10%” 
按 住 Shift 键 的 同时 , 拖 动 鼠标 , 绘制 一 个 正 区 


将 前 景色 设置 为 “白色 ( #939393 )”, 选择“ 直 


3. 单 击 国 按钮 ， 在 弹出 的 下 拉 列 表 中 选中 国 EB 


4.， 按 住 Shift 键 的 同时 ， 使 用 鼠标 从 左 向 右 拖 动 


景色 设置 为 “白色 ( #939393 )”, 选择 " 椭 


o 


o 


si 使 用 自 定形 状 工具 


将 前 景色 设置 为 "白色 ( #939393 )”， 
选择 “ 自 定形 状 工具 ”图 。 
2.， 在 工具 属性 栏 中 设置 “工具 类 型 
为 “形状 ”。 
3.， 单 击 “ 形 状 ” 右 侧 的 下 拉 按 钮 H， 在 
弹出 的 下 拉 列 表 中 选择 "四 " 选项 。 


四 经 验 一 筹 能 一 一 形状 的 使 用 


当 用 户 在 工具 属性 栏 中 设置 “工具 类 型 ”为 “形状 ”后 ， 在 图 像 中 将 出 现 一 个 形状 图 层 。 方便 
用 户 对 绘制 的 图 形 进行 旋转 、 变 形 等 操作 ， 而 不 会 对 整个 背景 图 有 所 影响 。 图 层 的 相关 操作 和 
概念 将 在 第 10 章 中 进行 讲解 。 


在 Photoshop 中 制作 网 页 主体 界面 


1. 在 工具 箱 中 选择 “文字 工具 ” 国 。 
2. 使 用 鼠标 在 图 形 中 单 击 ， 并 输入 文本 。 


如 
| 了 如 有 果 输 入 的 文字 不 是 白色 的 ， 用 户 可 | 
| 以 选择 “文本 工具 ” 国 后 ， 在 工具 属性 栏 中 单 击 ， 
| 字体 颜色 色 块 ， 在 打开 的 “ 拾 色 器 (文本 颜色 )” 


1 经 验 一 筹 能 一 一 多 边 形 工具 的 使 用 


在 Photoshop 中 , “多边形 工具 ”图 的 使 用 方法 和 “椭圆 工具 ” 另 
基本 相同 ， 只 是 在 其 工具 属性 栏 中 多 了 一 个 “ 边 数 ”选项 ， 
该 选项 用 于 设置 绘制 的 多 边 形 的 边 数 ， 边 数 越 多 绘制 的 形状 
越 接近 于 圆 形 ， 如 右 图 所 示 分 别 是 5 边 形 和 12 边 形 效果 。 


9.2.3 ”为 图 像 填 充 颜 色 


在 制作 和 处 理 图 像 时 ， 用 户 经 常 需要 对 绘制 的 形状 或 是 某 些 区 域 填 充 新 的 颜色 。 而 在 
Photoshop 中 用 户 可 选择 使 用 “ 油 潜 桶 工具 ” 辆 或 是 “渐变 工具 ” 轩 对 图 像 进行 填 色 。 下 面 将 
讲解 为 图 像 填充 颜色 的 方法 。 
1. 使 用 “油漆 桶 工具 ” 
各 用 “油漆 桶 工具 ” 国 可 以 为 图 像 或 选区 填充 颜色 ， 填 充 颜 色 前 需要 先 设 置 好 前 景色 。 
其 使 用 方法 是 : 设置 好 前 景色 后 ， 再 使 用 “选区 工具 ”在 需要 填充 颜色 的 区 域 建 立 选区 ( 选区 
工具 将 在 第 10 章 中 进行 讲解 ) 。 在 工具 箱 中 选择 “油漆 桶 工具 ” 国 ， 使 用 鼠标 单 击 已 建立 选 
区 的 位 置 ， 填 充 颜色 ， 如 下 图 所 示 。 


12 
Hour: 


二 计 汪 新手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


上 经 验 一 筹 管 一 一 常用 的 填充 方式 


除 使 用 “油漆 桶 工具 ” 国 对 选区 进行 填充 外 ， 用 户 还 可 以 使 用 快捷 键 对 选区 进行 填充 ， 其 中 按 


AlttDelete 组 合 键 可 使 用 前 景色 填充 ， 按 Ctrlt+Delete 组 合 键 可 使 用 背景 色 进 行 填充 。 


和 es 
J 


2. 使 用 “渐变 工具 ” 


使 用 “油漆 桶 工具 ” 国 只 能 填充 单一 的 颜色 ， 会 使 填充 效果 变 得 十 分 僵硬 。 月 

282 ” 充 多 种 颜色 的 “渐变 工具 ”图 ， 成 为 网 页 制作 者 以 及 平面 设计 人 员 所 喜爱 的 填充 了 
工具 的 使 用 方法 是 : 建立 选区 后 ， 在 工具 箱 中 选择 “渐变 工具 ” 国 ， 在 其 工具 属性 栏 中 选择 
人 渐变 方式 ， 在 “渐变 列表 ”下 拉 列 表 中 选择 需要 填充 的 渐变 样式 ， 再 将 鼠标 移动 到 图 像 中 拖 动 


鼠标 绘制 渐变 路 径 即 可 ， 如 下 图 所 示 。 


变 " 下 拉 列 表 框 , 打开 “渐变 编辑 器 "对话 框 在 “ 预 设 ” 
栏 中 选择 一 种 用 于 修改 的 预 设 样 式 ， 在 颜色 预览 条 下 
方 单 击 需要 编辑 颜色 的 色 标 。 再 单 击 “颜色 ” 色 块 ， 
在 打开 的 “ 拾 色 器 ( 色 标 颜色 ) ”对 话 框 中 设置 色 标 
的 颜色 ， 完 成 后 单 击 EEEBE= 汪 按钮 完成 设置 。 若 用 
户 觉得 渐变 中 的 色 标 数量 不 够 时 可 直接 在 颜色 预览 
条 下 方 相应 的 位 置 单 击 ， 在 单 击 处 添加 新 的 色 标 。 


间 : 如 果 渐 变 列表 框 中 没有 需要 的 渐变 样式 应 该 怎么 办 呢 ? 


mt 答 : Photoshop 支持 用 户 自行 定义 填充 的 渐变 样式 。 其 设置 方式 是 在 “ 渐 
变 工具 ”工具 属性 栏 中 单 击 “ 浙 。 [esm | 


ba 本 一 一 
4 3 
: [MAD] 

[二 (5)-，] 

em BE 


PT): 工交 
FN): 100 | %» 


以 能 够 填 
[ 具 。 渐 变 


在 Photoshop 中 制作 网 页 主体 界面 上 


和 有 EH 到 % 制作 “帮助 中 心 ”页 面 图 像 
QQ 掌握 绘制 矩形 的 方法 。 


, 学 握 前 景色 的 设置 方法 以 及 使 用 “渐变 ”工具 填充 颜色 的 方法 。 串 


本 例 将 制作 “帮助 中 心 ” 页 面 图 像 ， 其 主要 操作 包括 设置 前 景色 ， 使 用 “渐变 ”工具 填 
充 图 形 等 知识 ， 其 最 终 效 果 如 下 图 所 示 。 


由 


帮助 中 心 
在 好 忧 喜 ,你 可 以 淫 什 么 了 ee 
283 
72 口 
Hours 


本 丁克 放大 图 像 显示 


打开 “bangzhu.psd” 图 像 ， 在 工具 箱 中 选择 “ 缩 吉 
放 工具 ”图 ,移动 鼠标 光标 到 编辑 窗口 左上 角 ， Fi 人 
连续 单 击 鼠标 左 键 以 放大 图 像 显 示 比 例 。 了 a i 人‘ 


总 ,认可 以 涩 什么 ? rr 
| > 好 优惠 和 淘 乓 网 是 什么 关系 了 pa 
A 


| 的 | 从 好 忧 豆 到 淘宝 网 购物 安全 吗 ? 
| 默 模式 是 放大 ， 若 想 缩小 图 像 可 按 住 | 
| Al 键 的 同时 单 击 图 像 了 


He 


在 工具 箱 中 单 击 前 景色 色 块 图 ， 在 打开 对 话 框 
的 “#” 文 本 框 中 输入 前 景色 颜色 值 ， 这 里 输入 
“f9f73b”， 按 Enter 键 关 闭 对 话 框 ， 完 成 前 景色 
的 设置 。 


32 
An 
人 


22 
Hour: 
A 


让 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


tr 


k 


选择 “矩形 选 


框 工 具 ” 国 。 


2.， 拖 动 鼠标 沿 着 参考 线 绘制 一 个 矩形 选区 。 


放生 


在 设置 网 页 页 面 时 ， 添加 参考 线 可 


日 以 使 用 户 更 快 地 定位 网 页 元 素 的 位 置 。 


AGE 昌 。 设 置 浙 变样 式 


1. 
之 


在 了 
在 


[ 具 箱 中 


hh 选择“ 渐变] 


工具 属性 栏 


[ 具 ” 国 。 
中 单 击 辆 按钮 ， 


渐变 方式 为 “线性 渐变 ”。 


单 击 “ 渐 变 列表 ”下 拉 列 表 框 ， 打 开 


渐变 器 ”对 话 框 。 


“编辑 


本 二 于 用 乱 形 工具 


1. 选择 “和 矩 形 工具 ” 国 。 
2. 在 工具 属性 栏 中 设置 “工具 模式 ” 为“ 像素" 
3.， 拖 动 鼠 标 在 参考 线 中 绘制 一 个 矩形 。 


癌 章 介 本 本 本 
为 增加 按钮 的 立体 感 ， 本 例 制作 的 ， 
和 .按钮 将 由 两 个 部 分 组 成 。 ! 


好 优惠 和 淘宝 网 是 什么 


1 国人 好 刘 aRe 宇 motosesma? 
| i 
| 


设置 


i 编辑 渐变 颜色 


择 第 3 个 选项 。 

2.， 单 击 左边 的 色 标 。 

3. 在 打开 的 “ 拾 色 器 ( 色 标 颜 色 ) ”对 话 框 + 
设置 颜色 为 “#ff8b03”。 

4， 单 击 EEBEa 按 钮 。 


o 


在 “编辑 渐变 器 ”对 话 框 的 “ 预 设 ” 栏 中 选 


和 


AGE 有。 填 刘 渐变 颜色 


在 “编辑 渐变 器 ”对 话 框 
为 “#3d00”。 


放 


选区 。 


依次 单 击 


设置 右边 的 色 标 颜 色 
ER 按钮 , 关闭 “ 编 
辑 渐 变色 ”对 话 框 。 按 住 Shift 键 的 同 
标 光标 移动 到 选区 项 部 位 置 ， 再 按 住 鼠 标 左 键 不 
向 下 拖 动 ， 填 充 渐变 色 。 按 Ctrl+D 组 合 键 取消 


时 ， 将 鼠 


9.3 ”使 用 路 径 进 行 网 站 标志 绘制 


网 站 标志 即 网 站 Logo， 通 常 使 


nies 


了 解 “ 路 径 ” 
久 掌握 使 用 


[ 具 " 国 ， 通过 “钢笔 工 


[ 具 ” 国 可 以 给 


通过 编辑 路 径 可 轻松 制作 出 各 种 


县 。 


自 


ee 


路 径 进 行 绘制 。 


网 站 标志 。 


绘制 路 径 的 方法 。 


1 久 掌握 路 径 的 调整 和 修改 方法 。 | | 


在 Photoshop 中 制作 网 页 主 


在 好 忧 嘉 ， 称 可 以 做 什么 了 

好 忧 惠 和 淘宝 网 是 什么 关系 ? 

从 好 忱 惠 到 淘宝 网 购物 安全 吗 ? 
能 2 


在 Photoshop 中 路 径 工具 半 


体 界 面 


要 是 “钢笔 


制 出 任意 的 形状 。 如 果 是 文本 ， 可 以 直接 将 其 转换 为 路 


9.3.1 认识 “路 径 ”面板 
路 径 是 由 多 条 线段 构成 的 工作 区 域 ， 它 就 像 是 在 画布 上 用 钢笔 勾画 的 草图 ， 勾勒 出 最 
终 效果 的 轮廓 。 通 过 工具 箱 中 的 “钢笔 工具 ” 国 可 以 绘制 出 任意 形状 的 路 径 。 在 Photoshop 中 
选择 【 窗口 ] 人 路 径 】 命令 将 打开 “路 径 ”面板 ， 如 下 图 所 示 。 通 过 它 可 以 实现 对 路 径 的 调整 。 
“路 径 ”面板 中 各 部 分 的 作用 如 下 。 
从 路 径 缩 览 图 和 名 称 : 显示 路 径 的 大 致 形状 和 路 径 名 


称 ， 双 击 名 称 可 为 其 重 命名 。 
如 当前 路 径 图 层 : 在 “路 径 ” 面 板 中 以 蓝 底 白 字 高 亮 


显示 的 路 径 图 层 为 当前 路 径 图 层 ， 所 有 操作 只 针对 
当前 路 径 图 层 进行 。 
从 “用 前 景色 填充 路 径 ”按钮 曾 : 单 击 该 按钮 ， 可 使 


用 当前 的 前 景 


色 填 充当 前 路 径 


让 “用 画笔 描 边 路 径 ” 按 钮 网 : 在 选择 一 种 画笔 工具 
和 前 景色 后 ， 单 击 轿 按钮 即 可 为 当前 路 径 图 层 进行 
描 边 ， 也 可 选择 其 他 绘图 工具 对 路 径 进行 描 边 


“路 径 ” 面 板 按钮 组 
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人 “将 路 径 转 为 选区 ”按钮 圈 : 单 击 该 按钮 ， 
人 2 “将 选区 转 为 路 径 ”按钮 画 : 单 击 该 按钮 ， 


人 “添加 图 层 蒙 版 ”按钮 夯 : 


面板 中 添加 图 层 蒙 版 。 


“多 


人 如“ 册 


9.3.2 


创建 路 径 


建新 路 径 ” 按 钮 局 : 单 击 该 按钮 ， 可 新 
除 路 径 ” 按 钮 圈 : 单 击 该 按钮 ， 可 删除 


可 以 将 当前 路 径 转换 为 选区 。 
可 以 将 当前 选区 转换 成 路 径 。 


单 击 该 按钮 ， 可 以 将 当前 路 径 以 前 景色 进行 填充 并 在 “图 层 ” 


建 一 个 路 径 图 层 。 
当前 路 径 图 层 。 


使 


“钢笔 工具 ” 


图 可 以 随意 在 图 像 窗口 中 绘制 直线 路 径 和 曲线 路 径 ，“ 钢 笔 工具 ” 


是 网 页 制 


作者 在 制作 


些 曲线 图 像 较 多 的 网 页 图 


像 的 首选 。 


本 例 将 打开 “小 山 .psd” 图 像 ， 在 其 中 绘制 
笔 工 具 ” 国 创建 路 径 的 方法 ， 其 具体 操作 如 下 : 


小 山 轮廓 ， 并 对 其 进行 填充 为 例 讲解 使 用 “ 钢 


选择 “钢笔 "工具 


打开 “ 


小 山 .psd” 图 


像 ， 在 工具 箱 中 选择 “ 钢 


笔 工具 " 图 
2.， 将 鼠标 光标 移动 到 右 侧 山 项 下 单 击 。 
3. 再 将 鼠标 光标 移动 到 图 像 右边 边缘 ， 按 住 鼠 
标 左 键 不 放 ， 将 鼠标 光标 向 右 下 角 拖 动 ， 观 


察 路 径 的 幅度 


至 合适 位 置 时 释放 鼠标 。 


| 但 个 PSD 文件 中 


EE 


按 住 Alt 键 的 同时 ， 单 击 第 二 个 锚 点 ， 将 该 锚 点 转 
换 为 直线 型 锚 点 以 方便 绘制 直线 。 


UL 


在 Photoshop 中 制作 网 页 主体 界面 


机 二 在 


到 像 右 下 角 单 击 。 


3.， 将 鼠标 在 左上 山脊 位 置 单 击 并 拖 动 ， 调 整 路 
径 形状 使 其 与 山脊 形状 吻合 。 

4. 然后 将 鼠标 移 到 图 像 右边 缘 单 击 并 调整 路 径 
形状 。 

5. 最 后 单 击 路 径 起 点 


位 置 ， 闭 合 路 径 。 


| ] = 一 
! | 287 
72 口 
Hours 
AGE 用 路 径 转 换 为 选区 
1.， 选择 【 窗口 ]/【 路 径 ) 面板 ， 在 其 中 选择 “ 工 
作 路 径 ” 图 层 。 
2.， 单 击 “ 将 路 径 转 换 为 选区 ”按钮 国 ， 将 路 径 62 
转换 为 选区 。 Hour 


A a 
,0 用 户 可 通过 使 用 * 钢 | 

， 笔 工具 。 国 绘制 路 径 ， 再 将 路 径 畦 换 为 选区 ， ， pe 
最 后 对 选区 进行 各 种 编辑 . | 


1.， 将 前 景色 设置 为 “绿色 (#81af17 ) ”。 pa 
2， 按 AlttDelete 组 合 键 , 使 用 前 景色 填充 选区 ， 个 
再 按 Ctrl+D 组 合 键 取消 选区 。 


32 
ET ~“ 
若 想 填充 的 颜色 更 加 丰满 ， 用 户 可 
以 使 用 渐变 色 对 选区 进行 填充 。 


9.3.3 选择 路 径 


刚 创建 的 路 径 处 于 显示 状态 ， 如 果 关闭 图 像 文件 后 再 打开 ， 路 径 将 默认 不 会 显示 出 来 。 但 % 
可 以 通过 在 “路 径 ”面板 中 选择 路 径 将 其 显示 出 来 ， 然 后 通过 “路 径 选取 ”工具 组 选择 路 径 ， 
“路 径 选取 ”工具 组 包括 “路 径 选择 工具 ” 苹 和 “直接 选择 工具 ”号 。 其 中 “路 径 选 择 工具 ” 国 


[2 到 的 让 让 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


是 针对 整个 路 径 的 操作 ， 在 移动 整个 路 径 的 位 置 时 就 可 以 使 有 具 ; “直接 选择 工具 ”国足 
针对 某 个 路 径 锚 点 的 ， 常 调整 某 个 锚 点 的 位 置 或 选择 时 使 用 ， 其 使 用 方法 如 下 。 
公 “路 径 选择 工具 ”的 使 用 : 在 工具 箱 中 选 和 “直接 选择 工具 ”的 使 用 : 在 工具 箱 中 选 


攻 


择 “ 路 径 选 择 工 具 ” 革 后， 使 用 鼠标 单 击 并 择 “ 直 接 选择 工具 ? 国 后 , 使 用 息 标 单 击 路 径 ， 

拖 动 需要 移动 的 路 径 即 可 。 显示 该 路 径 的 所 有 描 点 ， 单 击 需要 调整 位 置 
或 者 形状 的 锚 点 。 此 时 ， 锚 点 将 从 空心 变 为 
实心 锚 点 ， 再 对 锚 点 进行 拖 动 调整 。 


9.3.4 调整 路 径 

选择 路 径 后 可 以 对 路 径 进行 调整 ， 调 整 路 径 通常 都 是 通过 增 减 锚 点 完成 的 。 锚 点 的 多 少 及 
位 置 可 以 控制 路 径 的 曲 度 等 特性 ， 当 路 径 中 的 某 段 路 径 不 够 准确 时 ， 可 以 尝试 增加 或 删除 锚 点 
后 再 进行 调整 。“ 添 加 锚 点 工具 ” 国 可 以 在 路 径 上 添加 错 点 ， 而 “删除 锚 点 工具 ” 国 则 可 以 
删除 锚 点 ， 其 使 用 方法 如 下 。 
人 吧 “添加 锚 点 工具 ”的 使 用 : 在 工具 箱 中 选 有 “删除 锚 点 工具 ”的 使 用 : 在 工具 箱 中 选 
择 “添加 锚 点 工具 ” 国 后 ， 将 筷 标 光标 移 择 “ 删 除 锚 点 工具 ” 国 后 ， 将 筷 标 光标 移动 
动 到 路 径 中 要 添加 锚 点 的 位 置 单 击 可 添加 锚 。 ”到 要 删除 锚 点 上 单 击 ， 即 可 将 该 锚 点 删除 
点 ， 再 使 用 鼠标 拖 动 调整 锚 点 延长 路 径 形状 。 


在 Photoshop 中 制作 网 页 主体 界面 


剧目 目 了 JE 使 用 路 径 绘制 网 站 Logo 


巩固 路 径 的 创建 与 编辑 方法 。 
进一步 掌握 将 路 径 转 换 为 选区 以 及 填充 颜色 等 知识 。 


本 例 将 使 用 路 径 工 具 绘 制 网 站 Logo， 主 要 包括 绘制 形状 路 径 、 移 动 路 径 、 编 辑 路 径 、 将 
路 径 转 换 为 选区 、 填 充 选 区 及 模糊 图 像 等 操作 ， 其 最 终 效果 如 下 图 所 示 。 


Or 网 络 安全 网 
wangluoanquanwang 


i 

新 建 一 个 88 x 31 像素 、 分 辩 率 为 96 的 图 像 文档 。 
按 Ctrl+R 组 合 键 ， 显 示 标尺 。 按 住 鼠标 从 垂直 的 
标尺 左边 向 右边 图 像 上 拖 动 ， 新 建 一 条 垂直 参考 
线 。 使 用 相同 的 方法 在 图 像 四 周 都 添加 参考 线 。 


网 站 的 Togo 标准 各 有 不 同 ， 本 例 制 ， 


EE lk 

1. 在 工具 箱 中 选择 “ 自 定形 状 工具 ” 国 。 

2。 在 工具 属性 栏 中 设置 “工具 模式 " 为 “路 径 ， 
再 设置 “形状 ”为 “图 ”选项 。 

3。 拖 动 鼠 标 在 参考 线 内 绘制 路 径 。 


52 
Hours 
全 
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72 小 时 精通 


下 
二 


STEP 03: 
竺 工 具 箱 中 选择 “直接 选择 工具 ” 国 。 
使 用 鼠标 单 击 绘制 的 形状 。 当 出 现 错 点 后 ， 
使 用 鼠标 单 击 上 方 内 部 的 错 点 ， 当 锚 点 变 为 
实心 状态 后 ， 拖 动 鼠标 将 其 向 下 拖 动 。 


访 3,， 网 站 的 Logo 都 是 通过 设计 后 使 
用 钢笔 工具 绘制 的 ， 但 如 果 制作 的 是 比较 简单 
的 图 形 ， 而 且 与 “ 自 定义 形状 ”工具 中 的 某 种 
形状 类 似 , 则 通过 修改 形状 能 更 快 地 完成 Logo 
的 制作 。 


STEP 04: 

在 工具 箱 中 选择 “添加 错 点 工具 ” 国 |。 

使 用 鼠标 在 左下 方 内 侧 的 直线 上 单 击 ， 添 加 
一 个 锚 点 。 按 住 鼠 标 向 中 间 一 些 的 位 置 上 拖 
动 ， 移 动 锚 点 位 置 。 
使 用 相同 的 方法 ， 在 右 下 方 内 侧 的 直线 上 单 
击 添加 锚 点 ， 并 移动 锚 点 位 置 。 


输入 


STER055 


1. 打开 “路 和 
径 转 换 为 选区 ”按钮 图 ,将 路 径 转 换 为 选 


在 工具 箱 中 


径 ” 面 板 ， 在 该 面板 中 单 击 “将 路 
区 。 


选择 “渐变 工具 ” 园 。 


在 工具 属性 面板 中 设置 “渐变 样式 ”为 “ 橙 ， 


黄 ， 橙 渐变 ”， 单 击 加 按钮 。 
3.， 使 用 鼠标 从 选区 中 间 向 右 下 拖 动 进行 填充 渐 
变 。 按 Ctrl+D 组 合 键 取消 选区 。 


STEP 06， 
在 工具 箱 中 选 


择 “ 文 字 工 具 ” 国 。 使 用 鼠标 在 图 


像 中 单 击 并 输入 文本 。 


, 涂 :; 
人 黑色 是 为 了 让 


Logo 看 起 来 更 加 有 层次 和 有 区 域 感 。 


在 Photoshop 中 制作 网 页 主体 界面 上 的 3 


9.4 制作 网 页 文本 


文字 是 传达 信息 的 一 种 手段 , 在 网 页 图 像 中 文字 更 是 必 不 可 少 的 , 它 不 仅 能 丰富 图 像 内 容 ， 
还 能 起 到 美化 图 像 、 强 化 主题 的 作用 。 下 面 讲解 在 Photoshop 中 输入 并 编辑 文字 的 方法 。 


目 上 ED ------ 


@ 快速 了 解 文字 的 类 型 。 QQ 熟练 掌握 创建 路 径 文字 的 方法 。 
1 进一步 掌握 变形 文字 的 方法 。 川 | 


9.4.1 文字 的 类 型 

根据 文字 的 创建 方法 不 同 ， 创 建 出 的 文字 类 型 也 不 尽 相 同 ， 如 根据 文字 的 排版 方向 可 分 为 “291 
横 排 文 字 和 直 排 文 字 ; 根据 创建 的 内 容 可 分 为 点 文字 、 段 落 文字 和 路 径 文字 。 下 面 分 别 对 每 种 72 
类 型 的 文字 进行 介绍 。 Hours 
从 横 排 文字 : 是 指 文字 方向 平行 于 水 平面 ， ”大 直 排 文字 : 直 排 即 竖 排 ， 是 指 文字 在 垂直 
可 通过 工具 箱 中 的 “ 横 排 文字 工具 ” 国 进 行 ”方向 上 平行 于 垂直 水 平面 。 可 通过 “ 直 排 文 
创建 。 字 工 具 ” 国 进行 创建 . 


如 点 文字 : 点 文字 即 一 行文 字 ， 它 可 以 是 横 ” 大 段 沙文 字 : 段落 文字 是 指 在 定 界 框 中 输入 
排 或 直 排 的 文字 。 的 可 以 进行 自动 换行 、 调 整 文字 区 域 大 小 等 
操作 的 段落 文本 。 


THE VOICE OF THE CITY 
years ago Ihe school children used to chant 


of their delivery was a singsohz recitative betwee 
30 Episcopal 


说 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


上 经 验 一 牧 入 一 一 路 径 文字 


路 径 文字 是 指 在 路 径 上 创建 的 文字 ， 其 前 提 需 在 图 
输入 文字 。 


像 中 绘制 出 路 径 轨 迹 ， 然 后 在 创建 的 路 径 上 


9.4.2 输入 文字 


Photoshop 中 输入 文字 的 工具 位 于 文字 工具 组 中 ， 包 括 “ 横 排 文字 工具 " 国 、“ 直 排 
文字 工具 " 国 、“ 横 排 文字 蒙 版 工具 ” 器 和 “ 直 排 文字 蒙 版 工具 " 叶 。 它们 的 使 用 方法 基本 相同 ， 
其 使 用 方法 是 : 在 工具 箱 中 选择 任意 一 个 文 
字 工 具 , 再 在 其 工具 属性 栏 中 对 “字体 系列 、 


字体 大 小 、 颜 色 ” 等 进行 设置 后 ， 使 用 鼠标 
在 图 像 需要 输入 文本 的 位 置 单 击 即 可 输入 ， 


如 右 图 所 示 。 


本 
TD 


若 想 输 入 段落 文本 ， 


则 在 设置 完工 具 属 性 栏 后 ， 需 将 鼠标 移动 到 
图 像 中 绘制 一 个 存放 段落 文字 的 文本 框 ， 然 


后 在 文本 框 中 输入 文本 。 


合 键 可 以 结束 输入 状态 。 


和 经 验 一 敌 管 一 一 设置 字符 样式 


外 ， 输 入 完 文本 后 ， 按 Ctrl+Enter 组 


] 


© Paradise| 


当 创 建 了 文字 后 ， 根 据 需 要 可 对 文字 的 大 小 、 间 距 和 对 齐 方式 等 属性 进行 设置 ， 使 文字 更 具 艺 
术 美 感 。 而 这 些 设置 方法 都 可 在 “字符 ”和 “段落 ”面板 中 进行 。 选 择 【 窗 口 〗/【 字 符 】 命 令 ， 
可 打开 如 下 方 左边 所 示 的 “字符 ”面板 ， 在 该 面板 中 除 可 以 对 文本 的 字体 系列 、 字 体 大 小 和 颜 
色 等 基本 参数 进行 设置 外 ， 还 可 以 进行 如 大 小 写 、 字 间距 、 下 划 线 、 上 标 和 下 标 等 参数 的 设置 。 
选择 【窗口 〗/【 段 落 】 命 令 ， 可 打开 如 下 方 右边 所 示 的 “段落 ”面板 ， 在 该 面板 中 可 以 对 段落 
进行 设置 ， 如 文本 对 齐 方式 、 左 右 缩 进 等 设置 。 


9.4.3 


设置 变形 文字 


在 Photoshop CS6 中 可 以 制作 多 种 变形 文字 ,包括 遍 形 上 弧 、 下 弧 、 波 浪 和 脱 


通过 变形 文字 的 使 用 ， 


列 方式 , 往往 更 加 吸引 注意 力 。 在 Photoshop 上 


户 可 以 快速 地 对 文本 外 观 以 及 排列 方式 进行 重新 编辑 ， 


长 等 多 种 效果 。 
而 这 种 新 的 排 


hi 设置 变形 


文字 的 方法 是 : 输入 文字 


后 , 选中 文字 ， 


在 Photoshop 中 制作 网 页 主体 界面 


在 工具 属性 栏 中 单 击 辆 按钮 ， 打 开 “ 变 形 文字 ”对 话 框 。 在 其 中 设置 样式 、 弯 曲 等 参数 ， 最 后 
单 击 EEEE 汪 按钮 完成 文字 的 变形 ， 如 下 图 所 示 。 


二 C4 


样式 (Sj: 册 束 四 ED 
阅 唤 时 光 ， 一 起 分 本 @xkF(H) © 生 E(V) Te 阿 员 dj 光 ， -起 分 全 i 


Sale}: EF 村 


水 平坦 (O 0 % 


生计 一 贞 ( 0 % 


9.4.4 创建 路 径 文字 


在 一 些 图 像 中 , 用 户 往往 能 看 到 文字 按照 某 种 特殊 的 排列 方式 进行 排列 , 以 形成 一 个 形状 。 一 一 
这 种 效果 是 通过 路 径 制作 的 文字 ， 路 径 文字 即 是 在 路 径 上 创建 文字 ， 因 此 需要 先 绘制 出 路 径 的 293 
轨迹 ， 再 在 路 径 中 输入 需要 的 文本 ， 在 创建 路 径 文字 时 ， 用 户 还 可 对 路 径 的 锚 点 进行 编辑 ,使 《72 
路 径 的 轨迹 更 符合 要 求 。 创 建 路 径 文字 的 方法 是 : 使 用 “钢笔 工具 ” 辆 在 需要 输入 文字 的 位 置 。 Hous_ 
绘制 一 段 路 径 ， 在 工具 箱 中 选择 “文字 工具 ” 国 ， 并 设置 文本 格式 。 在 路 径 上 单 击 和 鼠标 ， 定 位 
文本 插入 点 ， 输 入 需要 的 文字 ， 可 看 到 文字 将 按照 绘制 的 路 径 形状 输入 并 排列 ， 如 下 图 所 示 。 


| 经 验 一 敌 仍 一 一 编辑 文字 路 径 


输入 完成 后 ， 若 发 现 路 径 曲 线 不 符 要 求 ， 在 “路 径 ” 面板 中 选择 输入 文字 后 自动 生成 的 文字 路 径 ， 


选择 “钢笔 工具 ” 国 ， 按 住 ct 键 ， 此 时 鼠标 变 为 形状， 在 路 径 上 单 击 鼠 标 可 选择 错 点， 然 
后 对 路 径 曲线 进行 调整 即 可 . ~“ 


全 上 本 2 制作 “兑奖 广告 ”图 像 
久 巩固 文本 的 输入 方法 以 及 文本 格式 的 设置 方法 。 码 € 


1 久 进一步 党 所 变形 文字 的 设置 方法 。 hl 


加 


让 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


本 例 将 在 兑奖 广告 图 像 中 输入 文本 ， 并 进行 格式 设置 ， 包 括 文本 的 输入 、 格 式 的 设置 和 


层 样式 的 使 


294 
输入 文本 
72 口 
Hours, 打开 “兑奖 广告 图 像 .psd” 素 材 图 像 文件 
在 工具 箱 中 选择 “ 横 排 文字 工具 ” 国 ， 设 置 
前 景色 为 “红色 (#a30001)”。 
2.， 在 其 工具 属性 栏 中 设置 字体 为 “微软 雅 黑 ” 
大 小 为 “36 点 ”。 


等 操作 ， 完 成 后 的 最 终 效果 如 下 图 所 示 。 


网 


更 多 超 值 兢 尼 等 着 灼 GO> 


3. 使 用 鼠标 在 


文字 。 


而 二 有 设置 文本 大 小 


1.， 选择 之 前 输入 的 “兑奖 ”文本 。 


图像 中 单 击 ,输入 " 惠 点 兑奖 啦 ! " 


2.， 在 “ 横 排 


为 “48 点” 


是 个 


| 上 有 在 选择 “ 横 排 文字 工具 " 国 后 ， | 
| 用户 才 旬 区 再 次 选择 之 前 输入 的 文字 。 | 


od 


读书 笔记 


字 ” 工 具 属性 栏 中 设置 字体 大 小 


o 


\ 


在 Photoshop 中 制作 网 页 主体 界面 


STEP 03: 

1.， 在 “ 惠 点 兑奖 啦 ! ”文本 外 任意 位 置 单 击 以 
取消 “兑奖 ”文本 的 选中 状态 ， 再 在 “ 横 排 
文字 ”工具 属性 栏 中 单 击 阅 按 钮 ， 在 打开 的 
对 话 框 中 分 别 设置 “样式 、 弯 曲 ” 为 “ 凸 起 、 
+9”。 

2 单 击 EBD 按钮 完成 变形 设置 。 


SUERI04 且 输入 文本 并 进行 格式 设置 


1. 在 图 像 窗口 中 单 击 并 输入 的 文本 “赶快 到 论 
坛 旺 音 赚 惠 点 吧 ! ”。 

2.， 选 中 “赶快 到 论坛 晒 单 赚 惠 点 吧 ! ”文本 ， 
选择 【窗口 ] /【 字符 】 命令 , 打开 “字符 ” 
面板 ， 单 击 攻 按钮 为 文本 设置 “斜体 ”， 设 
置 大 小 为 “20 点”, 颜色 为 "黑色 ( #000000) 。 


STEP 05， 设置 文字 格式 

1.， 选择 输 入 的 “ 赚 惠 点 ”文本 。 

2.， 在 “字符 ”面板 中 ， 设置 大 小 为 “30 点 ” 
颜色 为 “红色 ( 撩 a30001)”。 


i 
En 人 党 通过 


不 同 的 颜色 与 字体 大 小 , 来 突出 一 些 广告 信息 


STEP 06 : 继续 输入 文字 
1.， 按 Ctn+Enter 组 合 键 ， 结束 文字 的 编辑 状态 。 
在 工具 箱 中 单 击 圈 按钮， 将 前 景色 与 背景 色 互 


2. 在 工具 属性 栏 中 设置 “字体 系列 、 字 体 大 小 ” 
; 辕 简 、12 点 ”。 

在 图 像 中 单 击 输入 文本 ， 最 后 选择 

[ 具 " 国 , 并 拖 动 鼠 标 移动 文字 位 置 。 


^ 
Hour 
人 


RE 
从 


二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


9.5 ”网 页 切片 输出 


网 页 图 像 效果 制作 完成 后 ， 需 要 切片 后 才能 在 制作 网 页 时 正常 使 用 。 而 切片 就 是 将 图 像 切 
分 成 多 个 小 块 ， 以 便 在 制作 网 页 时 使 用 。 下 面 就 将 讲解 网 页 切片 输出 的 相关 知识 。 


DESEO ------ 


快速 掌握 切片 的 创建 与 编辑 方法 。 


1 S 学 担 切 片 输出 的 方法 。 | | 


9.5.1 创建 切片 


切片 就 是 在 已 制作 好 的 图 像 中 绘制 一 些 矩 形 区 域 ， 以 便 将 该 区 域 中 的 图 像 导 出 为 单独 的 图 
像 。 在 Photoshop CS6 中 使 用 “切片 工具 ” 力 即 可 进行 切片 。 切 片 的 方法 与 使 用 “和 矩 形 工 具 ” 国 
绘制 矩形 的 方法 相同 。 其 方法 是 : 在 工具 箱 “裁剪 工具 ” 国 按 钮 上 单 击 鼠 标 右键 ， 在 弹出 的 
快捷 菜单 中 选择 “切片 工具 ” 国 ， 将 鼠标 光标 移动 到 要 切片 图 像 的 左上 角 ， 按 住 鼠 标 左 键 不 放 
向 右 下 角 拖 动 ， 至 合适 位 置 时 释放 鼠标 ， 完 成 切片 的 创建 ， 如 下 图 所 示 。 


1 经 验 一 敌 售 一 一 切片 原则 


切片 时 应 只 对 需要 的 部 分 进行 切片 ， 要 尽 可 能 地 减 小 切片 面积 ， 需 清楚 哪些 内 容 是 该 图 像 所 必 
需 的 ， 哪 些 是 不 需要 的 ， 并 隐藏 不 需要 的 部 分 后 再 切片 。 对 于 纯色 背景 不 需要 切片 ， 因 为 纯色 
背景 只 需 在 Dreamweaver 中 直接 对 容器 进行 背景 颜色 设置 即 可 。 对 于 渐变 色 背 景 由 于 可 以 通过 
重复 的 方式 实现 , 因此 只 需要 切片 该 图 像 的 某 一 部 分 即 可 .。 当 多 个 图 像 在 网 页 页 面 中 重复 使 用 时 ， 
只 需要 对 其 中 的 任意 一 个 进行 切片 ， 而 不 需要 对 每 个 图 像 都 进行 切片 。 


9.5.2 ”编辑 切片 

创建 好 切片 后 , 可 能 创建 的 切片 并 不 精确 , 此 时 , 可 对 切片 进行 修改 。 另 外 , 创建 好 的 切片 ， 
可 以 通过 “切片 选项 ”对 话 框 设置 切片 的 名 称 、 超 级 链接 的 URL 地 址 等 参数 ， 其 常用 编辑 方 
法 如 下 。 


在 Photoshop 中 制作 网 页 主体 界面 


个 调整 切片 : 在 工具 箱 中 选择 “切片 选择 工 ”和 则 设 置 切片 选项 : 在 切片 上 单 击 饼 标 右键 ， 
具 ” 辆 .将 筷 标 光标 移动 到 切片 中 单 击 选中 在 弹出 的 快捷 菜单 中 选择 “编辑 切片 选项 ” 
切片 ， 再 将 息 标 光标 移动 至 切片 上 方 的 锚 点 命令 。 在 打开 的 对 话 框 中 可 根据 需要 设置 切 
上 ， 按 住 筷 标 左 键 拖 动 调整 大 小 。 片 的 名 称 以 及 URL 等 参数 。 


1 上 RS 图 全 
SN): huodong 
WRU 
tea): 

信和 让 多 本 (W): 


A 无 72 口 
-一 - -一 一 - Hours 
上 经 验 一 敌 信 一 一 移动 与 删除 切片 
使 用 “切片 选择 工具 ” 国 选 择 切片 后 ， 将 鼠标 光标 移动 到 切片 上 ， 按 住 鼠 标 左 键 不 放 进行 拖 动 ， 62 
可 调整 切片 的 位 置 。 选 中 切片 后 ， 按 Delete 键 则 可 以 删除 选中 的 切片 。 wx 


9.5.3 输出 切片 


前 网 页 中 支持 gif ( 静态 及 动画 ) 、jpg 及 png 格式 的 图 像 ， 在 输 
出 切片 的 格式 类 型 ， 通 常 以 输出 gf 静态 图 像 优先 ， 如 果 图 像 色 彩 非 常 
格式 ， 而 如 果 图 像 需 要 背景 透明 时 ， 则 优先 考虑 使 用 png 格式 。 

下 面 将 打开 已 经 切片 完成 的 “活动 说 明 .psd” 图 像 ， 将 其 中 的 切片 输出 保存 以 方便 用 户 制 
作 网 页 时 使 用 ， 其 具体 操作 如 下 : 


tr FF 


切片 前 需要 先 确定 输 , 
富 时 ， 则 优先 考虑 jpg “< 


py 


本 本 本 设置 保存 类 型 re 
1.， 打 开 “ 活 动 说 明 .psd” 图 像 ， 选 择 | 色 导 1 | 
【文件 】/【 存储 为 Web 所 用 格式 】 
命令 , 在 打开 的 对 话 框 中 选择 "优化 " 
1、 本 活动 由 好 优惠 网 络 科技 全 程 提供 。 
选项 卡 。 2、 活 动 主 冯 4 x 主 剖 转 执 为 aaa 
a 2、 活 动 主机 全 部 为 专 壮 的 Linox 主 机 ， 引 | esa 
2 在 图 像 预 览 窗口 中 单 击 选择 切片 二 3 免费 期 为 1 个 月 ，1 个 月 菏 后 用 户 需要 | am 5 
“02" 。 We 22 € 
Hour: 
3 由 于 该 切片 图 像 色 彩 较 丰 富 ， 因 此 全 
设置 其 图 像 文件 的 格式 为 "JPEG" ， 
其 他 选项 保持 默认 设置 不 变 。 


[| An 
有 | GJ 还 怪 ) 拉 个 


y 


二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


继续 设置 保存 类 型 


在 图 像 预览 窗口 中 单 击 选择 切片 
“06 

2.， 该 切片 图 像 色彩 不 丰富 ， 因 此 设置 
其 图 片 文件 的 格式 为 “GIF”， 其 
余 选 项 保持 默认 设置 不 变 。 

3.， 设 置 完成 后 , 单 击 EE 一 刁 按 
钮 。 


LI 


1 本 活动 由 好 优惠 网 络 科技 全 程 提供 * 
2、 活 动 主机 全 部 为 专业 的 Linax 主 机 引 
3 免责 期 为 1 个 月 ，! 个 月 满 后 用 户 需要 


[or 


人 各 
器 z 


豆 因 扫 放 alg 
各 


和 


押 可 
大小 

Pr 
ns lan 


名 加 


Es 


| 


Re 
5 ED 1， 在 “保存 在 ”下 拉 列 表 框 中 选择 存储 文件 的 
“ 路 径 。 
a 2， 在 “文件 名 "文本 框 中 输入 图 像 的 文件 名 。 
同 3， 单 击 忆 到 而 十 按钮 完 成 保存 。 在 打开 的 提示 对 
本 话 框 中 单 击 忆 囊 已 按钮 。 
鸟 :类 ， 
se 天 二 cm 
| tsk: =] EM] 
RE: EN 了 


国 目 本 人 用 及 为 “热门 商品 ”图 像 切片 并 输出 
久 巩固 参考 线 的 创建 方法 。 


， 人 进一步 学 握 创建 切片 并 输出 切片 的 方法 。 Hl 


本 例 将 为 “热门 商品 ”图 像 切片 并 输出 ， 主 要 包括 参考 线 的 创建 、 创 建 切 片 、 设 置 切片 选 
项 以 及 将 切片 输出 等 操作 ， 完 成 后 的 最 终 效果 如 下 图 所 示 。 


商 | 别人 在 理 : 手 至 
op 语 走 珠 县 Beel 论 必 站 蛮 汶 基层 有 100g/ 控 订 / 坪 角 。。 令 24 小 轩 随身 党 本 除 印 汝 活 液 
9ML 丙 约 佐久 ,品味 弃 典 | 。 9 筒 夺 有 深 秀 美 色 滨 化 后 弘 去 青春 挤 多 法 赣 去 盖 印 @ 


STJEPRIO0T 线 
打开 “热门 商品 .psd” 图 像 文件 ， 按 Ctrl+R 组 合 
键 打开 标尺 ， 再 为 图 像 创建 参考 线 。 


和 站 委 
区 二 例 中 “立即 购买 ”按钮 部 是 相同 
的 ， 只 需要 为 其 中 一 个 创建 切片 即 可 。 


STEP 02: 

1.， 在 工具 箱 中 选择 “切片 工具 " 贺 . 

2.， 拖 动 鼠 标 为 图 像 创 建 切片 ， 创 建 时 可 以 按 空 
格 键 再 拖 动 图 像 到 需要 创建 切片 的 图 像 位 置 
进行 切片 的 创建 操作 。 


创建 切片 


名 为 了 切片 准确 ， 最 好 将 图 像 放大 后 
再 切片 。 此 外 ， 用 户 切片 的 部 分 才 会 显示 为 
蓝 色 ， 未 切片 而 Photoshop 自动 划分 的 部 分 为 
灰色 。 


STEP03:- 编 

1.， 在 切片 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 
中 选择 “编辑 切片 选项 ”命令 。 

2.， 在 打开 对 话 框 的 “名 称 ” 文 本 框 中 输入 切片 
名 称 。 

3.， 单 击 忆 3 证 司 按 钮 。 按 照相 同 的 方法 完成 其 他 

切片 的 切片 选项 设置 。 


] 片 选项 


A ia(A): 


Rd 
x 0 


WY) 278 


切片 部 有 1}: 无 


在 Photoshop 中 制作 网 页 主体 界面 


和 E 品 Avon/ 雅 芳 小 黑 裙 走 珠 
后 水 9ML 简约 忧 雅 ,品味 经 典 


创建 好 参考 线 并 选择 “切片 工具 ” 
贺 后 ， 在 工具 属性 栏 中 单 击 EEEEEEEDO 拉 
钮 可 以 根据 参考 线 快速 进行 切片 的 创建 。 


^ 
Hour 
人 


“ 
a 
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三 输出 切片 


选择 【文件 ] /【 存储 为 Web 
所 用 格式 】 命 令 ， 在 打开 的 对 
话 框 中 , 按 住 Shi 许 键 的 同时 ， 
分 别 单 击 除 “热门 商品 ”切片 


外 的 所 有 切片 。 
2. 设置 切片 图 像 保存 类 型 为 
“JPEG”, 单 击 Eee 
按钮 。 


回转 的 为 sm 
ES 


元 所 ， 师 可 和 了 东信 息 


9.6 练习 1 小 时 


WP 输出 切片 


1.， 在 “保存 在 ”下 拉 列 表 框 中 选择 保存 位 置 。 

2.， 在 “文件 名 ”下 拉 列 表 框 中 输入 名 称 。 

3. 在 "格式 "下 拉 列 表 框 中 选择 " 仅 限 图 像 "选项 。 
在 “切片 " 下 拉 列 表 框 中 选择 "所 有 用 户 切 片 ” 
选项 。 

4， 单 击 ESESa 按 钮 。 


本 章 主 要 介绍 了 Photoshop 在 制作 网 页 主体 界面 时 需要 使 用 的 知识 ， 用 户 要 想 在 日 常 工作 
中 熟练 使 用 它们 ， 还 需 再 进行 巩固 练习 。 下 面 以 制作 购物 网 站 中 的 “用 户 登 录 效 果 图 ”为 例 ， 


进一步 巩固 这 些 知识 的 使 用 方法 。 
制作 “用 户 登录 效果 图 ” 


本 例 将 练习 制作 用 户 登 录 效果 图 ， 通 
过 制作 可 练习 绘制 圆 角 和 矩 形 、 和 矩形 、 输 入 
文字 和 设置 文字 等 知识 ， 其 最 终 效 果 如 右 
图 所 示 。 


用 户 登 录 


卫 号 | 
证 丽 . 
加 记 作用 户 各 (对 写 同 守 十 什 迁 ] 
登录 。 服 池 -kK 


本 季 后 .就 可 以 秽 保 他 的 才 室 并 利 订单 能 第 被 准 机 


起 半 到 从 的 用 号 中 去 . 征 缀 有 了 账号 ?| 瑟 上 让 硬 询 室 用 户 可 点 此 | 渔 习 录 | 


vo 


编辑 网 页 图 像 


学 习 2 小时; 。 图 像 编辑 与 色彩 调整 
生 抽 作 间 项 的 这 六 让， 月 记 能 项 室 对 向 从 。 使 用 图 层 和 小 镜 关 化 图 作 
进行 一 些 简单 的 处 理 ， 如 消除 图 像 中 的 瑕 姜 、 调 
整 图 像 的 颜色 ， 以 使 图 像 效果 符合 需要 ; 或 使 用 ， 
图 层 来 组 合 图 像 、 使 用 滤 镜 来 制作 特殊 效果 的 图 : 。 重 @ 
像 ， 使 网 页 中 的 图 像 效果 引 人 注 目 ， 达 到 吸引 浏 
览 者 的 目的 。 


上 机 3 小 时 


主治 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


10.1 图 像 编 辑 与 色彩 调整 

在 制作 网 站 时 , 并 不 是 所 有 的 图 像 都 需要 用 户 自行 设置 .用户 经 常 还 会 根据 实际 情况 美化 、 
编辑 一 些 图 像 照片 。 编 辑 图 像 一 般 可 通过 调整 颜色 、 修 改 图 像 中 的 瑕 症 和 组 合 图 像 等 完成 ， 下 
面 将 对 图 像 编 辑 与 色彩 调整 的 方法 进行 讲解 。 


IESEI>------ 


QQ 快速 掌握 选区 的 创建 与 修改 方法 。 熟练 掌握 调整 图 像 色彩 的 方法 。 


G 进一步 掌握 图 像 的 编辑 与 修饰 方法 。 


10.1.1 使 用 工具 创建 选区 


选区 用 于 指定 工作 范围 ， 即 确定 要 进行 编辑 的 目标 对 象 。 用 于 创建 选区 的 工具 有 “ 选 框 
工具 组 、“ 套 索 ” 工 具 组 和 “ 魔 棒 ” 工 具 组 等 。 下 面 对 最 常用 最 基本 的 选区 工具 组 进行 介绍 。 
1. “ 选 框 ”工具 组 
选 框 工具 组 用 于 创建 规则 形状 的 选区 ,如 使 用 "矩形 选 框 工具 " 转 可 创建 短 形 或 正方 形 选区 ， 
"椭圆 选 框 工具 ” 国 可 创建 椭圆 形 或 网 形 选区 等 。 它 们 的 使 用 方法 类 似 ， 只 是 绘制 出 的 选 
形状 不 同 。 其 使 用 方法 是 ， 在 工具 箱 中 选择 “ 选 框 ” 工 具 组 中 的 任意 工具 ， 鼠 标 光 标 变 为 十 
状 ， 将 鼠标 移动 到 图 像 中 需要 选择 的 区 域 的 起 始点 ， 按 住 鼠 标 左 键 不 放 并 拖 动 鼠 标 到 被 选择 
域 的 结束 位 置 ， 释 放 鼠 标 后 即 可 创建 一 个 
区 。 如 右 图 所 示 为 使 用 " 椭 回 选 框 工具 " 图 
制 的 一 个 椭圆 选区 。 
需要 注意 的 是 ， 在 绘制 选区 时 ， 用 户 若 
想 绘制 正 圆 或 正方 形 选区 ， 可 在 绘制 的 同时 
按 住 Shif 键 拖 动 鼠标 绘制 。 此 外 ， 按 CtHD 
组 合 键 可 以 取消 选区 。 


浴 嵌 风 悄 风 这 


1 经 验 一 筹 仍 一 一 单行 和 单列 选 框 工 具 的 使 用 


使 用 “单行 选 框 工 具 ” 国 和 “单列 选 框 工 具 ” 国 ， 可 以 在 图 像 中 创建 宽度 为 1 像素 和 高 度 为 1 
像素 的 选区 。 其 使 用 方法 非常 简单 ， 只 需 选 择 “ 单 行 选 框 工具 ” 国 和 “单列 选 框 工 具 ” 国 后 ， 


在 图 像 窗口 中 单 击 鼠标 。 这 两 种 工具 一 般 用 于 网 页 中 的 分 割 线 绘制 ， 建 立 选 区 后 ， 在 选区 中 填 
充 颜 色 即 可 完成 分 割 线 的 制作 。 


2. “ 套 索 ”工具 组 


当 用 户 需要 为 线条 复杂 一 些 的 图 像 建立 选区 时 ， 就 可 以 通过 套 索 工具 组 来 完成 。“ 套 索 ” 
工具 组 下 有 “ 套 索 工具 ” 国 、“ 磁 性 套 索 工具 ”图 和 “多 边 形 套 索 工具 ” 国 ， 其 使 用 方法 及 
分 别 如 下 。 


到 
nT | 


人 套 索 工 具 : 当 需 要 创建 一 个 复杂 的 选区 来 
选取 图 像 时 ， 可 使 用 套 索 工具 进行 选择 。 其 
使 用 方法 是 : 选择 “ 套 索 工具 ” 国 ， 在 需要 
选择 的 图 像 起 始 位置 按 住 扎 标 左 键 不 放 并 沿 
图 像 边缘 进行 拖 动 ， 当 回 到 图 像 起 始点 后 释 
放 和 鼠标 左 键 ， 完 成 选区 的 创建 。 


人 磁性 套 索 工具 : 当 建 立 选区 的 图 像 边缘 对 
比 度 高 时 ， 可 使 用 磁性 套 索 工具 快速 地 建立 
选区 。 其 使 用 方法 是 : 选择 “磁性 套 索 工 
具 ” 辆 ， 当 饼 标 光标 变 为 虽 形 状 ， 将 筷 标 光 
标 移动 至 需要 绘制 选区 的 起 始点 ， 单 击 鼠 标 
左 键 创建 选区 的 起 始点 ， 拖 动 鼠 标 ， 此 时 将 
产生 一 条 套 索 线 并 自动 附着 在 对 比 度 较 大 的 
图 像 周 围 , 继续 拖 动 鼠标 直到 回 到 起 始点 处 ， 
筷 标 光标 将 变 为 总 形状 ， 单 击 筷 标 完成 选区 
的 创建 。 


3. “ 魔 棒 ”工具 组 
“ 魔 棒 ” 工 具 组 中 的 


具 是 根据 颜色 容 差 创 建 选区 ， 即 颜色 在 某 个 容 差 范围 内 就 将 其 创建 


编辑 网 页 图 像 


从 多 边 形 套 索 工具 : 当 需 要 选择 的 对 象 有 很 
多 直线 段 时 ， 可 使 用 多 边 形 套 索 工具 进行 选 
择 。 其 使 用 方法 是 : 选择 “多 边 形 套 索 工 
具 ” 国 ， 当 筷 标 光标 变 为 只 形状 ， 在 绘制 的 
图 像 起 点 处 单 击 筷 标 ， 然 后 根据 图 像 轮廓 移 
动 鼠 标 并 单 击 绘制 选区 ， 当 光标 移 至 起 始点 
时 ， 光 标 会 变 为 踊 形状 ， 单 击 筷 标 封闭 创 建 
选区 。 


四 经 验 一 敌 仍 一 一 删除 关键 点 


在 使 用 “多 边 形 套 索 工 具 ” 国 及 “磁性 套 索 
工具 ”图 创建 选区 的 过 程 中 ， 如 果 产 生 的 关 
键 点 不 正确 ， 可 以 按 Backspace 键 进行 删除 ， 
然后 再 重新 创建 。 


上 1 经 验 一 筹 管 一 一 隐藏 选区 
创建 好 选区 后 ， 有 时 为 了 方便 操作 ， 可 以 将 


选区 隐藏 ， 按 Ctrl+H 组 合 键 即 可 ， 再 次 按 
Ctrl+H 组 合 键 时 可 重新 显示 选区 。 


Ueda 


为 选区 ， 其 中 各 工具 的 使 


方法 及 作用 分 别 如 下 。 


Hour: 
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如 魔 棒 工具 : “ 魔 棒 工 具 ” 国 根据 颜色 相似 
度 ( 容 差 ) 创建 选区 ， 容 差 值 越 大 ， 其 选择 
的 相似 范围 越 大 ， 所 创建 的 选区 越 不 精确 。 
其 使 用 方法 是 : 选择 “ 魔 棒 工 具 ” 国 后 ， 在 
工具 属性 栏 中 设置 “ 容 差 ” 值 ， 再 在 要 选择 
图 像 区 域 中 的 适当 位 置 单 击 即 可 创建 选区 。 


如 快速 选择 工具 : “快速 选择 工具 ”图 和 “ 魔 


棒 工 具 ” 国 的 作用 类 似 。 其 使 用 方法 是 : 选 
择 “ 快 速 选择 工具 ”图 ， 在 其 工具 属性 栏 中 
设置 相应 的 参数 后 ， 在 要 选择 的 图 像 中 拖 动 
筷 标 就 可 以 快速 地 创建 选区 。 


10.1.2 ”修改 选区 


创建 


区 后 ， 可 以 增加 选区 或 从 原 有 选区 中 删除 部 分 选区 以 及 反选 选区 ， 另 外 还 可 以 通过 


扩展 、 收 缩 等 操作 对 选区 进行 修改 ， 下 面 分 别 进行 介绍 。 


1. 增删 反选 选区 


操作 。 增 删 选区 以 及 反选 选区 的 方法 如 下 。 


为 了 简化 编辑 图 像 的 操作 ， 用 户 可 在 已 有 选 


区 的 基础 上 进行 增加 选区 或 者 删除 部 分 选区 等 


个 增加 选区 : 在 使 用 “选区 工具 ”建立 选区 的 同时 , 按 住 Shift 键 ， 可 在 已 建立 选区 的 基础 上 ， 


再 新 建 多 个 选区 。 


介 删 除 选区 : 按 住 Alt 键 的 同时 ， 单 击 想 要 删除 的 选区 ， 即 可 将 单 击 的 选区 删除 。 
人 由 反选 选区 : 如 果 想 选择 已 选 选区 以 外 的 区 域 ， 可 使 用 反选 选区 的 方法 进行 选择 。 按 


Ctrl+Shift+I 组 合 键 即 可 反选 选区 。 


2. 收缩 与 扩展 选区 
收缩 选区 与 扩展 选区 是 
于 扩大 选区 的 范围 。 它 们 常用 


个 相反 的 操作 ， 收 缩 选区 


缩小 选区 的 范围 ， 而 扩展 选区 则 


制作 多 轮廓 的 效果 ， 收 缩 与 扩展 选区 的 方法 如 下 。 


个 收缩 选区 : 建立 选区 后 ,选择 【〖 选 择 】/【 修 改 】/【 收 缩 】 命 令 ， 打 开 “ 收 缩 选区 ”对 话 框 ， 


在 该 对 话 框 中 即 可 设置 “收缩 量 ”参数 ， 完 成 设置 后 单 击 ER 本 按 钮 。 


人 四 扩展 选区 : 建立 选区 后 ,选择 【选择 〗/【 修 改 】/【 扩 展 】 命 令 ， 打开 “扩展 选区 ”对 话 框 ， 
在 该 对 话 框 中 即 可 设置 “扩展 量 ” 参 数 ， 完 成 设置 后 单 击 EEEBE 可 按钮。 


1 经 验 一 敌 售 一 一 羽化 选区 


羽化 选区 可 以 使 选区 呈 平 请 收缩 状态 ,同时 虚 化 选区 的 边缘 , 当 复制 羽化 后 的 


可 以 与 新 


像 到 新 图 像 中 时 ， 


像 进行 非常 好 的 过 渡 , 不 会 显得 生硬 。 其 使 用 方法 是 : 建立 选区 后 , 选择 【选择 了 人 修 


改 】/【 羽 化 】 命 令 ， 打 开 “ 羽 化 选区 ”对 话 框 ， 在 该 对 话 框 中 设置 “羽化 半径 ”参数 ， 完 成 设 


置 后 单 击 忆 靖宇 按钮 。 


10.1.3 ”使 用 工具 修复 与 编辑 图 像 


编辑 网 页 图 像 医 弄 [E 


通过 素材 库 或 数码 相机 获得 的 图 像 往往 不 能 完全 满足 


户 的 需要 ， 如 颜色 不 够 鲜艳 、 
需要 使 用 修饰 工具 来 修改 图 像 。 


像 过 于 单调 、 没 有 立体 感 和 人 物 脸 上 有 污点 等 ， 这 时 ， 就 神 


Photoshop 中 用 于 图 像 修复 与 编辑 的 工具 很 多 ， 下 面 分 别 进行 介绍 。 


1. 使 用 画笔 工具 


条 。“ 画 笔 工具 ” 馏 的 使 用 方法 很 简单 ， 其 
方法 是 : 在 工具 箱 中 选择 “画笔 工具 ” 蚁 ， 
设置 前 景色 后 ， 在 其 工具 属性 栏 中 设置 工具 
属性 。 最 后 使 用 鼠标 在 图 像 上 拖 动 即 可 根据 
绘制 的 路 径 显示 绘制 的 效果 ， 如 右 图 所 示 。 


“画笔 工具 ” 砚 是 Photoshop 中 经 常会 
的 工具 ， 绘制 各 种 轻柔 的 线 


上 经 验 一 筹 能 一 一 “画笔 ”面板 的 使 用 


若 用 户 需要 绘制 更 加 精细 的 图 像 ， 或 需要 使 用 画 
笔 绘 制 出 不 同 的 感觉 ， 就 需要 使 用 “画笔 ”面板 
来 设置 画笔 样式 、 纹 理 、 杂 色 和 平滑 等 参数 。 选 
择 【窗口 〗/【 画 笔 】 命 令 打 开 如 右 图 所 示 的 “ 画 
笔 ” 面 板 ， 在 其 中 设置 了 对 应 参数 后 ， 用 户 即 可 
在 其 下 方 的 画笔 浏览 栏 中 看 到 设置 后 的 效果 。 


dd 过 
读书 区 记 


和 绘制 图 案 。 其 中 ，“ 仿 制图 章 工 具 ” 辆 用 于 快速 复制 选中 


2. 使 用 “图 章 ” 工 具 组 


章 ” 工 具 组 包括 “仿制 图 章 工 具 ” 辆 和 “图 案 


草 


工具 ” 将 指定 的 图 像 填 充 到 图 像 中 。 下 面 分 别 讲解 它 


具 ” 贺 ， 使 用 它们 可 修改 图 像 
区 域 的 图 像 及 颜色 等 ，“ 图 案 图 
门 的 使 用 方法 。 
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从 仿制 图 章 工具 : 选择 “仿制 图 章 工具 ” ”人 ,图案 图 章 工具 : “图 案 图 章 工具 ”图 的 使 
圆 ， 在 其 工具 属性 栏 中 ， 设 置 画笔 大 小 、 画 “用 方法 与 “仿制 图 章 工具 ” 国 叭 一 不 同 的 是 ， 
笔 样式 和 不 透明 度 等 选项 ， 将 鼠标 光标 移动 其 操作 时 不 需要 按 住 Alt 键 就 可 进行 取样 填 
至 需要 复制 的 地 方 ， 按 住 Alt 键 的 同时 单 击 。 充 。 用 户 只 需 在 选择 工具 后 ， 在 工具 属性 栏 
鼠标 左 键 进行 取样 。 再 将 鼠标 光标 移动 到 画 ”中 选择 要 填充 的 图 形 ， 最 后 使 用 鼠标 在 图 像 
布 中 需要 的 位 置 拖 动 鼠 标 进行 涂抹 。 需要 的 位 置 拖 动 鼠标 进行 涂抹 即 可 。 


3. 使 用 “修复 ”工具 组 

“修复 ”工具 组 可 以 将 取样 点 的 颜色 信息 精确 地 复制 到 图 像 其 他 区 域 ， 并 保持 目标 图 像 的 
色相 、 饱 和 度 和 亮度 ， 以 及 纹理 等 属性 ， 是 一 组 十 分 快捷 方便 的 图 像 修 复工 具 。 其 中 “污点 修 
复 画 笔 工具 ” 国 主 要 用 于 快速 修复 图 像 中 的 斑点 、 色 块 、 污 迹 、 霉 变 和 划 痕 等 小 面积 区 域 ;“ 修 
复 画 笔 工 具 ” 国 用 于 使 用 图 像 中 与 被 修复 区 域 相似 的 颜色 去 修复 图 像 ，“ 修 补 工具 ” 国 的 工 { 
原理 与 “修复 画笔 工具 ” 辆 -一样 ， 唯 一 的 区 别 是 ， 在 使 用 该 工具 进行 操作 时 ， 要 像 使 用 套 索 工 
具 一 样 绘制 一 个 选区 ， 然 后 通过 将 该 区 域内 的 图 像 拖 动 到 目标 位 置 完 成 对 目标 区 域 的 修复 。 

本 例 将 打开 “人 物 jig” 图 像 ， 并 将 图 像 中 人 物 脸 上 的 红 巡 使 用 “修复 ”工具 组 去 掉 ， 
具体 操作 如 下 : 


ll 


we 使 用 “污点 修复 画笔 工具 ” 


打开 “人 物 jpg” 图 像 文件 ， 并 在 工具 箱 中 选 
择 “ 污 点 修复 画笔 工具 ” 国 。 

2. 将 鼠标 光标 移动 到 要 修复 的 图 像 区 域 中 进行 
拖 动 ， 完 成 污点 的 消除 。 


| EE 为 了 过 免 “修复 硬笔 工具 ” 国 的 | 
， 笔 过 大 ， 影 响 修复 效果 ， 最 好 在 工具 属性 栏 中 
设置 笔 大小 0 | 


使 用 “修复 画笔 工具 ” 


. 在 工具 箱 中 选择 “修复 画笔 工具 ”图 。 
2. 按 住 Alt 键 的 同时 ， 在 左 脸红 晕 左 下 角 取 样 。 
3.， 拖 动 鼠 标 修复 上 方 的 红晕 。 


取样 时 ， 最 好 将 取样 点 定 在 需要 修改 ， 
的 图 像 附近 ， 这 样 修复 部 分 的 颜色 、 图 像 会 失 | 
| 真 的 较 少 。 


本 本 使 用 “修补 工具 ” 

1.， 选择 “修补 工具 ”网 ， 在 要 修复 的 下 方 红 暴 
上 抢 动 鼠标 以 完成 修复 操作 。 

2.， 在 其 工具 栏 中 选中 国明 单 选 按 钮 。 

3。 拖 动 鼠 标 框 选 要 修复 的 图 像 区 域 。 


5 个 限 pe 
| 旨 由 于 “修复 画笔 工具 ” 国 寺 红学 的 消 
| 除 能 力 有 限 ， 所 以 部 分 区 域 需 要 配合 “修补 工 | 


将 鼠标 光标 移动 到 框 选区 域 中 ， 按 住 鼠标 左 键 不 
放 ， 将 框 选 的 区 域 拖 动 到 无 红晕 的 图 像 位 置 ， 让 
其 使 用 该 处 的 图 像 进 行 图 像 修复 。 


4. 使 用 “橡皮 擦 ”工具 组 
在 使 用 各 种 工具 进行 绘画 的 过 程 中 ， 


控 除 不 需要 的 部 分 。 橡 皮 擦 工具 组 包括 “橡皮 擦 工具 ”图 、 


橡皮 擦 工具 ” 国 ， 下 面 将 分 别 对 它们 的 使 用 方法 进行 介绍 。 


编辑 网 页 


“背景 橡 


难免 会 出 错 ， 此 时 可 使 用 “ 橡 


擦 ” 


具 组 9 


的 


县 


擦 工具 ” 国 和 “魔术 
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容 
的 
除 
皮 


(1) 橡皮 擦 工具 
“橡皮 擦 工具 ”图 用 于 擦 除 图 像 中 的 内 
， 当 擦 除 “背景 ”图 层 或 锁定 了 透明 区 域 
图 层 时 ， 擦 除 的 部 分 会 变 为 背景 色 ， 当 擦 
其 他 图 层 时 则 可 擦 除 图 像 中 的 像素 ，“ 橡 
擦 工具 ”图 的 使 用 方法 是 : 选择 “橡皮 擦 


如 


中 
色 
选 
栏 
模 
效 
擦 


的 
除 
除 
擦 


关 a 
宁 工 具 ” 国 加 深 图 像 的 颜色 ; “ 减 淡 工 具 " 国 可 以 通过 提高 颜色 的 亮度 使 画面 的 颜色 变 浅 ， 


深 
让 


具 ” 国 ， 在 工具 属性 栏 中 设置 属性 ， 再 使 
鼠标 在 图 像 中 需要 删除 的 区 域 中 进行 涂抹 ， 
右 图 所 示 。 


(2 ) 背景 橡皮 擦 工具 

“背景 橡皮 擦 工具 ” 国 能 自动 采集 画笔 
心 的 色 样 ， 同 时 删除 画笔 内 出 现 的 同 种 颜 
， 使 擦 除 的 区 域 变 为 透明 。 其 使 用 方法 是 : 
择 “ 背 景 橡皮 擦 工具 ” 国 ， 在 其 工具 属性 
中 可 通过 “限制 ”下 拉 列 表 框 选择 擦 除 的 
式 ， 在 “ 容 差 ” 数 值 框 中 设置 边缘 的 擦 除 
果 ; 选中 国 到 于 复 选 框 则 可 保护 前 景色 在 
除 时 不 被 擦 掉 。 


(3 ) 魔术 橡皮 擦 工具 
“魔术 橡皮 擦 工具 ” 国 能 自动 分 析 图 像 
边缘 ， 控 除 图 像 中 轮廓 明显 的 区 域 。 当 擦 


图 像 颜 色 变 的 鲜艳 、 明 亮 ， 其 使 用 方法 分 别 如 下 。 


它 可 以 降低 


普通 图 层 时 ， 擦 除 区 域 将 变 为 透明 ， 当 控 
“背景 " 图 层 或 锁定 的 透明 区 域 的 图 层 时 ， 
除 的 区 域 将 变 为 背景 色 。 
5. 使 用 “ 减 淡 ”工具 组 
当 处 理 的 图 像 缺 乏 层次 感 和 立体 感 时 , 用 户 可 以 使 用 加 深 或 减 淡 工 具 对 其 进行 编辑 。 其 中 
“加 深 工具 ”图 位 于 工具 箱 的 减 淡 工具 组 中 ， 和 “ 减 淡 工具 "” 国 作 用 相反 ， 合 
色 的 亮度 ， 使 画面 的 颜色 变 暗 。 当 图 像 曝光 过 度 或 需 增强 图 像 颜色 对 比 度 时 ， 就 可 使 用 “加 


选择 “加 深 工具 ” 国 在 工具 属 从 选择 “ 减 淡 工 具 ” 国 ， 在 工具 

性 栏 中 设置 属性 后 ， 使 用 鼠标 在 图 像 中 需要 属性 栏 中 设置 属性 后 ， 使 用 鼠标 在 图 像 中 需 

加 深 颜 色 的 区 域 进行 涂 抹 。 在 工具 属性 栏 中 要 减 淡 颜 色 的 区 域 进行 涂抹 。 在 工具 属性 栏 

的 “曝光 度 ”数值 框 ， 用 于 设置 颜色 亮度 。 中 的 “范围 ”下 拉 列 表 框 ， 用 于 设置 颜色 减 
淡 效 果 , 其 中 “阴影 " 选项 减 淡 效果 最 弱 ; “高 
光 ” 选 项 减 淡 效 果 最 强 。 


309 
nh 
Hours 
10.1.4 ”调整 图 像 颜色 Mr 
户 将 网 页 素材 图 像 拿 到 手 时 ， 并 不 是 每 张 图 像 都 能 直接 使 用 的 ， 有 些 图 像 颜 色 可 能 会 太 
灰 ， 这 时 ， 用 户 就 可 通过 调 色 命令 对 图 像 颜 色 进行 编辑 。Photoshop 中 用 于 调 色 的 命令 很 多 ， 
下 面 将 讲解 几 个 在 网 页 制作 时 常用 的 调 色 命令 。 
Hourd 
在 “色相 /饱和 度 ” 对 话 框 中 可 对 图 像 的 色相 和 饱和 度 进 行 调整 ， 对 饱和 度 不 够 或 过 高 而 
使 图 像 颜 色 偏 色 的 图 像 得 到 一 定 的 校正 作用 。 其 使 用 方法 是 : 打开 图 像 ， 选 择 【 图 像 ]/【 调整 】 
外 色相/ 饱和 度 】 命令 , 在 打开 的 “色相 /饱和 度 " 对 话 框 中 设置 图 像 的 色相 、 饱 和 度 和 透明 度 ， 
完成 后 单 击 EEEBE 按钮 ， 如 下 图 所 示 。 
Hourd 
目 老 色 (o) | Hau 
| 省 设置 4 刁 RS) | 
| 一 一 
Hoqur 昌 


证 习 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


2. 调整 亮度 / 对 比 度 


网 页 


像素 材 有 时 会 出 现 偏 亮 、 


偏 暗 或 


对 比 度 来 获得 一 个 


像 效 果 。 其 使 


度 /对比度 】 命令， 


入 需要 调整 的 值 后 


在 打 玫 


像 模糊 的 情况 ， 此 时 可 以 通过 调整 图 像 的 亮度 了 
图像 ， 选 择 【 图 像 ] /人 【 调整 ] /【 亮 


F 的 “亮度 / 对 比 度 ” 对 话 框 的 “亮度 ”和 “对 比 度 ”文本 框 中 ， 输 
击 ER 按钮 。 


3. 调 
当 一 


张 照片 整体 效果 欠 佳 ， 对 比 度 、 
线 对 图 像 的 整体 对 比 度 、 亮度 和 色彩 进行 调整， ` 便 凋 监 所 的 国 


下 上 


度 不 足 的 


将 在 “森林 少女 jpg” 图 像 中 使 
、 明 亮 ， 其 具体 操作 如 1 


亮度 和 色彩 都 不 满意 


时 ， 用 户 可 以 通过 调整 图 像 的 
像 看 起 来 更 有 质感 。 
图 像 的 色彩 ， 使 原本 偏 灰 、 饱 和 


i re 


打开 “森林 少女 .jpg” 


整 】/【 曲线 


四 像 文件 ， 选择 [ 图 像 J/【 调 
“曲线 ”对 话 框 。 


编辑 网 页 


AGE 和 设置 “曲线 "参数 


, 


~ 
-= Gd 
LT | 
a | 
| Bmp) 
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WACD: 
Wm 中 AAA Haw) 
有 上 关于 过 而 
二 名 光 (0255ML)  。 [ 困 
miawG 四 田 
EF: DE EA) 
同调 F 国 人 。 贱 安 呈 红 (N) 

— 有 
| 
Rh Be -= EE 

[ORea > C] 单 击 | 
四 zz Ec 
Ba) | 
wD. | 
WI) 
Mo 
如 
. a 
ACD: 
的  % FHF EniWnD 
A 邮 8 直 过 抽 
二 加 兴 0.255JL) 
Omi wg 加 四 
2 RE) A 
网 再 7 图。 网 交 RtON) 


本 丁丁 二 看 调整 后 的 效果 


可 图 像 显 示 窗 口 ， 完 成 最 终 效果 。 


返 


r 站 
| 在 “曲线 ” 对话 框 中 的 “显示 ” 栏 中 
| 有 一 些 复 选 框 ， 选 中 某 一 复 选 框 可 显示 对 应 的 | 
| 选项 ;取消 选中 该 复 选 框 ， 则 可 隐藏 这 些 选 项 。 ， 


4. 调整 黑白 色 


1. 在 “通道 ”下 拉 列 表 中 选择 “RGB” 选 项 。 
2. 将 鼠标 光标 移动 到 曲线 编辑 框 中 的 斜 线 上 方 ， 
单 击 鼠 标 创建 一 个 控制 点 ， 拖 动 控制 点 调整 
曲线 。 


的 .- 
8, 人 全 电 
| “曲线 ” 对 话 框 中 的 AAA 按钮 与 “ 色 
| 阶 ”对 话 框 中 对 应 的 按钮 作用 类 似 ， 都 可 以 在 
| 图像 中 获取 黑 场 ， 灰 场 和 向 场 


本 丁丁 增加 控制 点 


1. 再 将 鼠标 光标 移动 到 曲线 编辑 框 中 的 斜 线 下 
方 ， 单 击 鼠 标 创 建 另 一 个 控制 点 ， 拖 动 控 制 
点 调整 曲线 。 

2， 单 击 ER 按钮 。 


汪汪 不 需要 业 个 控制 点 时 ， 可 将 其 取消 ， 
| 取消 蛤 制 点 的 方法 是 : 按 住 Ci 键 将 饼 标 光标 ， 
移动 到 控制 点 上 并 单 击 ， | 


些 严 司 
色 的 方法 是 : 打开 图 像 ， 选 择 【 图 像 ] /【 调 


风格 的 网 页 或 艺术 风格 的 网 站 时 ， 经 


黑白 能 凸显 出 历史 感 以 及 沧桑 感 ， 在 制作 
常会 将 彩色 图 像 处 理 为 黑白 色 。 将 图 像 转 为 黑 
整 ] /【 黑白 】 命令， 在 打开 的 “黑白 ”对 话 框 


Ph ， 对 图 像 的 颜色 进 


行 调整 ， 单 击 EEaED9 按 钮 。 


32 € 
Hour: 
人 


蒙 版 是 一 种 遮盖 
像 的 合成 ， 是 制 
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选择 【图 像 〗/【 调 整 〗/【 去 色 】 命 令 ， 也 可 将 
中 的 黑白 区 域 进行 更 加 细致 的 调整 


10.1.5 ”使 用 蒙 版 编辑 图 像 


区 


. 创建 与 编辑 快速 蒙 版 
像 中 创建 快速 蒙 版 ， 忆 


作 特 效 图 像 时 需要 掌握 的 


像 变 为 黑白 色 ， 通 过 “黑白 ”对 话 框 能 对 图 像 


像 中 的 某 一 部 分 不 受 其 他 编辑 操作 的 影响 ， 常 
技巧 之 一 。 下 面 就 将 讲解 使 用 蒙 版 编辑 图 像 的 


丁 开 图 


区 的 


区 
图 


部 分 选 为 选区 ， 常 用 于 抠 图 操作 。 快 速 蒙 版 


具 箱 中 单 击 图 按钮 ， 进 入 快速 蒙 版 状态 ， 使 用 “画笔 工具 ”图 
区 域 将 变 为 红色 透明 区 域 再 次 单 击 图 接 钮 ， 退 出 


快速 蒙 版 状态 。 如 下 


[ 具 ” 国 对 图 像 中 灰色 的 背景 进行 涂抹 后 ， 退 出 快速 


区 域 后 ， 除 灰 { 


色 的 


上 经 验 一 筹 乱 一 一 使 用 快速 蒙 版 时 画笔 工具 的 使 用 


不 管用 户 事先 将 前 景色 或 背景 色 设置 为 任何 颜色 ， 进 入 快速 蒙 版 时 ， 前 景色 、 背 景色 将 自动 变 
为 黑白 色 ， 其 中 使 用 黑色 进行 涂抹 ， 被 涂抹 的 区 域 将 变 为 红色 ， 而 将 使 用 白色 进行 涂抹 时 ， 将 
会 出 现 类 似 橡 皮 擦 擦 除 红色 的 效果 .。 


2. 创建 并 编辑 剪贴 蒙 版 
使 用 剪贴 蒙 版 可 以 制作 
像 进 行 编辑 ， 但 图 像 的 形状 不 会 发 4 


它 上 次 图 像 的 显示 范围 。 


本 例 将 打开 “玩具 人 .psd” 图 像 和 “素材 jpg” 图 像 ， 使 用 “移动 工具 ”图 将 “素材 ”图 
用 剪贴 蒙 版 ， 使 玩具 图 像 出 现在 墨迹 出 现 的 区 域 


像 移动 到 玩具 人 图 像 中 ， 并 对 新 加 入 的 图 像 应 


中 ， 其 具体 操作 如 下 : 


相框 一 样 的 效果 , 它 能 将 一 幅 图 像 置 于 所 需 的 图 像 区 域 中 ， 对 图 
上 变化。 剪贴 蒙 版 能 够 用 一 个 图 层 中 包含 像素 的 区 域 来 限 钊 


编辑 网 页 图 像 


本 丁丁 打开 图 从 


在 Photoshop 中 打开 “玩具 人 .psd” 图 像 和 
"素材 jpg” 图 像 。 使 用 “移动 工具 " 国 将 " 素 
材 jpg” 图 像 移 动 到 “玩具 人 .psd” 图 像 中 。 


| 3 


二 人 再 四 
Ht 局 


所 


本本、 有 用 M6 菜 版 


选择 【窗口 ] 人 图 层 】 命令 ,打开 “图 层 ” 面 板 。 
在 图 层 2 上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 
选择 “创建 剪贴 蒙 版 ”命令 ， 将 图 层 2 转换 为 剪 
贴 蒙 版 。 


| Dn a | 
1 蒙 版 了 命令 ， 将 图 层 直接 转换 为 剪贴 蒙 版 ， 


本 丁丁 二 看 调整 后 的 效果 


完成 操作 后 ， 即 可 查看 到 最 终 效 果 。 


人 了 
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Hour: 


2 主 习 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


加 有 了 再 到 I 处理“ 清纯 少女 ”图 像 
G 巩固 画笔 工具 的 使 用 。 
, 熟练 为 图 像 调 色 的 方法 。 


4 纺 进一步 掌握 修饰 图 像 人 物 的 方法 。 | 


本 例 将 使 用 修补 工具 将 图 像 人 物 脸 上 的 冯 去 掉 ， 并 为 其 添加 腮 红 、 眼 影 等 ， 然 后 通过 快速 
蒙 版 以 及 调 色 命令 ， 对 图 像 中 的 局 部 区 域 进行 调 色 ,最 后 在 图 像 中 输出 文字 ， 调 整 前 、 后 的 图 
像 效 果 如 下 图 所 示 。 


. 在 Photoshop 中, 打开 "清纯 少女 .psd" 图 像 。 
在 工具 箱 中 选择 “修补 工具 " 国 。 

2.， 使 用 鼠标 沿 着 人 物 脸 上 的 痣 周围 绘制 建立 
选区 。 

3. 使 用 鼠标 拖 动 选区 ， 将 其 向 右上 方 移动 一 些 
作为 取样 点 。 按 Ctrl+D 组 合 键 ， 取 消 选区 。 


编辑 网 页 图 像 


人 


1. 在 工具 箱 中 选择 “加 深 工具 ” 国 。 

2. 在 其 工具 属性 栏 中 , 设置 “画笔 大 小 、 曝 光度 ” 
为 “60 像素 、10%” 

3. 使 鼠标 在 人 物 的 身 梁 背光 处 、 届 毛 下 方 、 
鼻子 下 方 涂抹 ， 以 增强 人 物 的 脸 部 轮廓 。 


ANED 0 最 绘制 妥 红 和 眼影 


1.， 在 工具 箱 中 选择 “画笔 工具 ”图 ， 设 置 前 景 ee 
色 为 “粉红 ( #f5353) ”。 

2.， 在 其 工具 属性 栏 中 ， 设 置 “ 画 笔 大 小 、 不 透 72 口 
明度 ”为 “50 像素 、20%”。 

3.， 使 用 鼠标 在 人 物 脸 类 上 和 眼 输 上 拖 动 ， 绘 制 
腮 红 。 


在 工具 箱 中 单 击 国 按 钮 , 进入 快速 蒙 版 状态 
选择 画笔 工具 ， 在 具 属 性 栏 中 设置 “ 
笔 大 小 、 不 透明 度 、 流 量 ”为 nig 
100%、100%”。 
3. 使 用 鼠标 在 图 像 头发 的 白色 区 域 以 及 蝴蝶 结 
上 进行 涂抹 。 


es 将 “画笔 工具 "图 | 
| 的 不 选 明度 、 流 量 设置 为 “100%” 后 不 会 影 | 
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1.。 再 次 单 击 图 按钮 , 退出 快速 蒙 版 状态 。 选 择 [ 先 
择 】/【 反 向 】 命令 ， 将 使 涂抹 过 的 位 置 转换 
为 选区 。 

2.， 选 择 【 选 择 ]/[ 修改 】]/[ 羽化] 命令, 打开 “ 羽 
化 选区 " 对 话 框 , 在 其 中 设置 “羽化 半径 "为 "2 


Hour: 


像素 ”。 单 击 忆 确定 按钮。 


二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


人 


1. 选择 [图像]/ 调整 ]/【 色相 /饱和 度 ] 命 令 ， 


打开 “色相 /饱和 度 ” 对 话 框 ， 设 置 “ 色 相 、 
饱和 度 ” 为 “-34、49”。 

2， 单 击 人 ER 按钮 。 按 Ctrl+D 组 合 键 取消 
选区 。 


{mr) 


本 和 文字 


1. 在 工具 箱 中 选择 “ 直 排 文本 工具 ” 国 。 

2. 在 工具 栏 中 设置 “字体 大 小 ”为 “36”。 

3.， 使 用 鼠标 在 图 像 右 侧 单 击 输入 文字 ， 将 字母 
的 "字体 系列 " 设置 为 “Forte”, 将 汉字 的 " 字 
体系 列 ” 设 置 为 “ 汉 仪 清 韵 体 简 ”。 


10.2 ”使 用 图 层 和 滤 镜 美化 图 像 


图 层 是 Photoshop 中 最 基础 的 元 素 之 一 ， 它 是 组 成 图 像 的 最 基本 单位 。 一 个 优秀 的 图 像 作 
品 往往 包括 多 个 图 层 ， 这 些 图 层 组 合 在 一 起 就 是 一 个 完整 的 图 像 。 滤 镜 是 Photoshop 中 预 设 的 
一 种 特殊 效果 ， 通 过 它 可 以 将 普通 的 图 像 制 作出 充满 创意 与 想象 的 效果 。 下 面 就 将 讲解 它们 在 
Photoshop 中 的 使 用 方法 。 


IEEEIS------ 


久 快速 学 握 图 层 的 基础 操作 。 人 掌握 设置 样式 的 方法 。 


， 包 熟练 掌握 在 处 理 图 像 时 常用 的 演 镜 。 | | 


10.2.1 使 用 图 层 美化 图 像 


层 是 组 成 图 像 的 基本 元 素 ， 图 像 的 每 个 部 分 都 可 以 分 别 放置 于 不 同 的 图 层 中 ， 这 些 图 层 
放 在 一 起 即 可 形成 完整 的 图 像 效 果 ， 增 加 或 删除 图 像 中 任何 一 个 图 层 都 可 能 影响 整个 图 像 ， 
层 是 图 像 的 载体 ， 没 有 图 层 ， 图 像 将 不 存在 。 和 图 层 的 相关 操作 都 可 以 在 “图 层 ” 面 板 以 及 
“图 层 ” 菜 单 中 完成 ， 下 面 就 将 讲解 使 用 图 层 美化 图 像 的 方法 。 

选择 【窗口 ] /【 图 层 】 命 令 ， 将 打开 如 下 图 所 示 的 “图 层 ” 面 板 。 在 使 用 图 层 编辑 前 ， 
户 需要 掌握 对 图 层 进行 编辑 的 方法 ， 如 新 建 、 删 除 、 复 制 、 链 接 和 合并 图 层 等 ， 其 方法 分 别 
介绍 如 下 。 


网 辐 


编辑 网 页 图 像 


人 选择 图 层 : 要 对 图 层 进行 编辑 ， 首 先 就 需要 选择 图 层 。 其 
方法 是 : 在 “图 层 ” 面 板 的 图 层 列表 中 单 击 需 要 的 图 层 列 
表 即 可 选择 该 图 层 。 

从 新 建 图 层 : 新 建 一 个 空白 的 图 层 后 ， 才 能 在 其 上 创建 新 的 
图 像 。 其 方法 是 : 单 击 “图 层 ” 面 板 底部 的 国 按 钮 。 

从 复制 图 层 : 复制 图 层 可 以 为 已 存在 图 层 创建 相同 的 图 层 副 
本 。 其 方法 是 : 在 “图 层 ” 面 板 中 单 击 并 拖 动 图 层 到 面板 底部 的 国 按 和 钮 上 ， 此 时 鼠标 光标 

将 变 为 四 形状 ， 释 放 和 鼠标 即 可 将 该 图 层 进行 复制 ， 复 制 的 图 层 副本 位 于 源 图 层 的 上 方 。 

从 隐藏 图 层 : 若 需要 单独 查看 某 个 或 几 个 图 层 的 显示 效果 ， 可 以 先 将 其 他 图 层 进行 隐藏 。 其 

方法 是 : 在 “图 层 ” 面 板 中 ， 单 击 需 要 隐藏 图 层 左 侧 的 图 按钮 即 可 进行 隐藏 ， 此 时 该 按钮 

将 变 为 国 状 态 . 

人 得 显示 图 层 : 若 需 要 显示 被 隐藏 的 图 层 ， 单 击 图 按钮 ， 该 按钮 将 交 为 图 状态 ， 被 隐藏 的 图 层 

将 被 显示 出 来 。 

从 重 命名 图 层 : 当 图 层 过 多 时 就 需要 对 图 层 进行 重 命名 以 方便 以 后 管理 与 编辑 。 其 方法 是 

将 鼠标 移动 到 “图 层 ” 面 板 中 需要 重 命名 的 图 层 名 称 上 ， 然 后 双击 鼠标 ， 此 时 图 层 名 称 变 

为 可 编辑 状态 。 输 入 新 名 称 后 按 Enter 键 确定 重 命名 。 

尹 锁 定 图 层 : 锁定 图 层 能 够 保护 图 层 中 的 内 容 不 被 编辑 。 在 “图 层 ” 面 板 中 的 “锁定 ” 栏 中 

提供 了 锁定 图 层 透明 区 域 、 锁 定 图 像 像素 、 锁 定位 置 和 锁定 全 部 的 功能 。 其 中 单 击 “ 锁 定 
透明 像素 ”按钮 图 ， 可 以 使 图 层 的 透明 区 域 受 到 保护 ， 限 制图 像 的 编辑 范围 。 单 击 “ 锁 定 
图 像 像 素 ”按钮 国 ， 此 时 将 不 能 再 对 图 层 进行 绘画 、 擦 除 或 应 用 滤 镜 等 会 改变 图 像 像 素 
的 操作 ， 而 只 能 进行 移动 、 变 换 等 简单 的 操作 。 单 击 “ 锁 定位 置 ”按钮 国 ， 将 不 能 对 图 层 
位 置 进行 移动 。 单 击 “ 锁 定 全 部 ”按钮 国 ， 图 层 将 被 全 部 锁定 ， 不 能 再 对 其 进行 任何 操作 。 

人 删除 图 层 : 如 果 不 再 需要 某 个 图 层 ， 可 将 其 删除 。 其 方法 是 : 选择 要 删除 的 图 层 , 单 击 “ 图 
层 ” 面 板 底部 的 国 按 钮 或 将 图 层 拖 动 到 该 按钮 上 。 


10.2.2 ”设置 图 层 样式 
为 使 图 像 产 生 更 多 的 效果 ， 用 户 可 通过 设置 图 层 样式 来 完成 ， 如 设置 图 像 的 不 透明 度 、 使 
图 像 融 合 在 一 起 、 为 图 像 措 边 或 设置 阴影 效果 等 。 下 面 将 对 图 层 样式 设置 的 方法 进行 详细 讲解。 


1. 设置 图 层 不 透明 度 

通过 设置 指定 图 层 的 不 透明 度 可 以 淡化 
该 图 层 中 的 图 像 ， 从 而 使 下 方 的 图 层 显示 出 
来 ， 设 置 的 不 透明 度 值 越 小 ， 就 越 透明 。 其 
方法 是 : 在 “图 层 ” 面 板 中 选择 需要 设置 不 
透明 度 的 图 层 ， 在 面板 的 “不 透明 度 ” 或 “ 填 
充 ” 数 值 框 中 输入 不 透明 度 的 值 或 单 击 右 侧 
的 下 拉 按 钮 畔 ， 在 弹出 的 列表 框 中 拖 动 滑 块 
进行 调整 即 可 ， 如 右 图 所 示 。 


让 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


2. 设置 图 层 的 混合 模式 


Photoshop CS6 中 提供 了 27 种 


按钮 置 ， 在 弹出 的 下 拉 列 表 中 选择 相应 的 图 层 混合 模式 选项 即 可 。 如 下 
设置 为 “ 变 亮 ”和 “又 加 ”的 效果 。 


式 ， 如 “投影 ”、“ 内 阴影 ”、 
色 又 加 ”、“ 渐 变 琶 加”、“ 图 案 翅 
并 且 能 使 图 像 更 具 层 次 感 和 立体 感 。 


或 选择 [ 图 层 ] 作 图 


下 虞 


层 混合 模式 ， 设 置 相应 的 


慨 的 颜色 进行 色彩 混合 ， 


网 


县 混合 模式 可 将 选择 的 


ff 


从 而 制作 出 特殊 的 


像 效果 。 


设置 图 层 混合 模式 的 方 ; 


在 “图 层 ”面板 中 选择 需 


设置 


到 层 混合 模式 的 图 层 ， 单 击 


“图 层 混合 模式 ” 右 侧 的 下 拉 


3. 打开 “图 层 样式 ”对 话 框 


所 示 将 图 层 混合 模式 


通过 为 图 层 应 用 图 层 样式 ， 可 以 使 图 像 内 容 的 效果 更 加 丰富 。 


“外 发 光 ”、“ 内 发 光 "、“ 作 


在 编辑 图 层 时 ， 添 加 各 种 样 


面 和 浮雕 ”、“ 光 泽 ”、“" 颜 


0” 以 及 “ 描 边 ”等 ， 可 以 制作 出 许多 丰富 的 图 像 效果 ， 


户 只 需 在 “ 


屋 ” 面 板 中 双击 需 


屋 样 式 的 图 层 ， 


设置 


单 击 ER 按钮 


县 样式 ] 命令 下 的 
0 可 查看 到 图 层 样式 。 


| 


子 命令 , 在 打开 的 “ 


[ 
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和 经 验 一 徐 镶 一 一 图 层 样式 的 使 用 


在 设置 图 层 样式 前 ， 需 先 在 “图 层 样 式 ” 对 话 框 
的 “样式 ”列表 中 选中 需要 修改 的 样式 后 ， 才 能 
在 对 话 框 右边 的 窗 格 中 设置 具体 的 参数 。 


层 样 式 ” 对 话 框 中 进行 相关 设置 后 ， 


10.2 


.3 ”认识 滤 镜 


编辑 网 页 图 像 


滤 镜 在 图 像 处 理 时 有 着 举足轻重 的 作用 ， 通 过 滤 镜 能 对 图 像 进行 各 种 特殊 的 处 理 从 而 使 普 
通 的 图 像 产生 神奇 的 变化 。 滤 镜 不 但 能 对 图 像 中 的 某 个 区 域 进行 处 理 而 且 也 能 对 整个 图 像 进行 


处 理 。 


如 下 图 所 示 为 图 像 滤 镜 前 后 的 效果 。 


使 用 滤 镜 时 需要 注意 以 下 几 点 ， 以 避免 出 现 不 必要 的 问题 : 


10.2 


则 滤 镜 不 能 对 位 图 、 索 引 以 及 16 位 通道 模式 的 图 像 进行 编辑 ， 若 需 对 这 些 图 像 使 用 滤 镜 需 先 
将 其 转化 为 RGB 模式 。 

所 由 于 滤 镜 的 处 理 单 位 是 像素 ， 所 以 相同 的 图 像 在 不 同 分 辨 率 的 情况 下 ， 也 会 出 现 不 同 的 图 
像 效果 。 

凤 在 对 高 分 辩 的 图 像 使 用 滤 镜 时 ， 会 占用 大 量 的 内 存 空间 ， 可 能 造成 程序 运行 速度 过 慢 。 

加 使 用 滤 镜 后 ， 有 时 会 在 图 像 边缘 出 现 毛 边 ， 此 时 只 需 对 毛 边 进行 羽化 处 理 。 

所 使 用 滤 镜 处 理 某 一 图 层 中 的 图 像 时 ， 需 要 选择 该 图 层 ， 并 且 该 图 层 必须 为 可 见 状态 。 

所 图 层 荣 版、 快速 蒙 版 和 通道 也 可 使 用 滤 镜 进行 处 理 。 

由 在 图 像 中 创建 选区 后 ， 只 能 针对 选区 进行 处 理 ， 如 果 未 创建 选区 ， 则 会 处 理 当 前 图 层 中 的 
全 部 图 像 。 


.4 ”使 用 滤 镜 美化 图 像 


在 Photoshop 中 有 大 量 的 滤 镜 ， 使 用 它们 可 制作 出 很 多 效果 奇特 的 图 像 ， 但 是 在 处 理 网 站 


所 需 
讲解 。 


下 


目 同 ， 


的 图 像 时 ， 很 多 滤 镜 都 不 会 用 到 。 下 面 就 将 对 在 制作 网 站 时 常用 的 一 些 滤 镜 效果 进行 


“马赛 克 ” 滤 镜 
"马赛克 ” 滤 镜 把 图 像 中 具有 相似 彩色 的 像素 统一 合成 更 大 的 方块 ， 使 方块 中 的 像素 颜 
从 而 产生 类 似 马 赛 克 般 的 效果 。 


ul 


[ey 


使 用 方法 是 : 选择 [【 滤 镜 】/[ 纹理 化 ] 儿 马赛 克 命令 ， 


的 值 ， 


来 改变 马赛 克 的 像素 大 小 。 


在 打开 的 “马赛 克 ” 对 话 框 中 设置 “单元 格 大 小 ”选项 ， 单 击 EREE 洒 按钮 。 如 下 图 所 示 为 在 
像 中 使 用 “马赛 克 ” 滤 镜 的 效果 。 在 “马赛 克 ” 对 话 框 中 也 可 通过 设置 “单元 格 大 小 ”选项 
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2. “高 斯 模糊 ” 滤 镜 
“高 斯 模糊 ” 滤 镜 根据 高 斯 曲线 对 图 像 进行 选择 性 地 模糊 ， 产 生 强 烈 的 模糊 效果 ， 是 比较 


常用 的 模糊 滤 镜 。 其 使 用 方法 是 : 选择 【 滤 镜 】/【 模糊 】/【 高 斯 模糊 】 命 令 ， 在 打开 的 “高 
斯 模糊 ”对 话 框 中 设置 “半径 ”选项 ， 单 击 EE- 汪 按钮 。 如 下 图 所 示 为 图 像 使 用 “高 斯 模糊 ” 
滤 镜 后 的 效果 。 在 “高 斯 模糊 ”对 话 框 中 ，“ 半 径 ”数值 框 用 于 调节 图 像 的 模糊 程度 ， 值 越 大 
模糊 效果 越 明 显 。 


3 “光圈 模糊 ” 滤 销 

“ 光 轿 模 糊 ” 滤 镜 可 以 将 
一 个 或 多 个 焦点 添加 到 图 像 中 ， 
户 可 以 对 焦点 的 大 小 、 形 状 以 
焦点 区 域外 的 模糊 数量 和 清晰 
等 进行 设置 。 选 择 【 涉 镜 】/ 
模糊 ] /【 光 国 模糊 】 命令 ， 
开 “ 模 糊 工 具 ” 和 “模糊 效果 ” 
面板 ， 对 模糊 参数 或 焦点 进行 设 
置 ， 或 使 用 鼠标 直接 对 图 像 中 出 
纲 的 模糊 点 、 焦 点 等 进行 调整 。 
完成 设置 后 单 击 图 像 窗口 上 方 的 
| 


[一 池 测 


上 经 验 一 筹 乱 一 一 “光圈 模糊 ” 滤 镜 的 参数 作用 


编辑 网 


国 ， 


在 使 用 “光圈 模糊 ” 滤 镜 时 ， 将 会 出 现 “ 模 糊 工 具 ” 面 板 和 “模糊 效果 ”面板 。 这 两 个 面板 中 


的 选项 作用 如 下 。 


所 “模糊 ”选项 : 用 于 设置 镜头 模糊 时 的 景深 ， 即 模糊 区 域 的 模糊 程度 。 


四 “光源 散 景 ”选项 : 用 于 控制 模糊 区 域 的 亮度 。 


人 “ 散 景 颜色 ”选项 : 用 于 控制 模糊 区 域 中 颜色 艳丽 度 。 
人 则 “光照 范围 ”选项 ; 用 于 控制 模糊 区 域 中 出 现 光照 效果 的 范围 。 


4. “添加 杂 色 ” 滤 镜 


"添加 杂 色 ” 滤 镜 可 以 向 图 像 中 随机 地 混合 杂 点 ， 即 添加 一 些 细小 的 颗粒 状 像素 。 在 制作 
网 页 背景 时 ， 想 要 增加 背景 图 像 的 质感 ， 往 往 会 在 纯色 的 背景 中 添加 杂 点 ， 再 使 
滤 镜 对 图 像 中 的 杂 点 进行 软化 。 其 使 用 方法 是 : 选择 【 滤 镜 】/【 杂 色 】/【 添加 
在 打开 的 “添加 杂 色 ”对 话 框 中 设置 参数 后 单 击 EEE= 汪 按钮 ， 如 下 图 所 示 。 


在 使 用 “添加 杂 色 ” 滤 镜 时 ， 将 会 涉及 一 些 参数 的 设置 。 各 参数 作用 如 下 : 
下“ 数量 ”选项 : 用 于 调整 杂 点 的 数量 。 
四“ 分布"” 栏 : 用 于 设置 杂 色 在 图 像 中 分 布 的 方式 。 
由 回 # 色 M) 复 选 框 : 用 于 设置 添加 的 杂 点 是 彩色 还 是 灰色 。 选 中 该 复 选 框 ， 杂 点 只 影响 原 图 的 
亮度 而 不 改变 其 颜色 。 


5. “镜头 光 晕 ” 滤 镜 
“镜头 光 晕 ” 滤 镜 通过 为 图 像 添 加 不 同类 型 的 


镜头 ， 从 而 模拟 镜头 产生 的 


“高 斯 模糊 ” 
杂 色 】 命令 ， 


眩光 效果 。 若 


想 在 冬天 或 夏天 的 照片 制作 出 一 抹 亮 点 ， 就 可 以 使 


“镜头 光 晕 ” 滤 镜 。 其 使 


方法 是 : 选择 


【 滤 镜 】/[ 泻 染 ]/[ 镜头 光 旱 ] 命 令 , 打开 “镜头 光 晕 "对话 框 。 在 其 中 选择 一 种 想 要 的 镜头 效果 ， 


设置 “亮度 ”参数 。 使 用 鼠标 在 “镜头 光 晕 ”对话 框 的 预览 图 区 域 和 


击 ， 调 整 光 晕 的 位 置 。 


完成 后 单 击 EEERE 汪 按钮 ， 如 下 图 所 示 。 在 “和 镜头 光 晕 ”对 话 框 中 ，“ 亮 度 ” 选 项 用 于 设置 
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镜头 光 旱 的 亮度 


6. “液化 ” 滤 镜 
"液化 ” 滤 镜 常用 于 进行 图 像 的 修饰 ， 通 过 使 图 像 出 现 扭曲 效果 而 达到 改变 图 像 曲线 的 目 
的 。 本 例 将 打开 “咖啡 jpg" 图像, 使用" 液化" 滤 镜 对 图 像 中 的 咖啡 进行 搅拌 , 其 具体 操作 如 下 


WSTEPOTE 打开 液化 对 话 杠 

1， 打 开 “ 咖 啡 jpg” 素 材 文件 ， 选 
择 [ 滤 镜 J 液化 ] 命 令 , 打开 " 液 
化 ”对 话 框 。 选 择 “ 向 前 变形 工 
具 " 图 。 

2， 在 “工具 选项 ” 栏 中 设置 “ 画 
笔 大 小 、 画 笔 压力 ”为 “100、 
34" 。 


加 高 如 村 式 


is 丰 而 加 
Ee 


i pe 
Pe | 


| zs 栏 中 ，“ 和 画笔 大 小 ”数值 | 
| 框 可 设置 画笔 的 大 小 ， “画笔 压 
| 力 ” 数 值 框 可 设置 扭曲 的 力度 。 


编辑 网 页 图 像 


本 


1. 按 住 鼠标 在 图 像 中 的 咖啡 杯 内 顺 
时 针 来 回 涂抹 ， 制 作出 搅拌 后 的 
咖啡 效果 。 


近 
后 
六 
节 
Q 


站 如 果 液 化 效果 不 理想 ， | 
可 按 CtrlHZ 组 合 键 撤销 上 一 次 操 ， 
作 ， 也 可 单 击 EEBE8N] 按 钮 将 | 
图 像 恢 复 到 原始 效果 ， 重 新 进行 | 


1 经 验 一 敌 能 一 一 “液化 ”对 话 框 中 工具 的 作用 


在 “液化 ”对 话 框 左 侧 有 7 个 工具 选项 ， 它 们 的 使 用 方法 相同 ， 但 分 别 代表 不 同 的 作用 ， 分 别 
介绍 如 下 。 
个 “ 问 前 变形 工具 ” 贺 : 用 于 向 前 推动 图 像 像素 ， 当 向 外 拖 动 鼠标 时 ， 可 扩大 图 像 像素 ; 当 
向 内 拖 动 鼠 标 时 ， 可 缩小 图 像 像 素 。 
让 “重建 工具 ”: 用 于 恢复 变形 的 图 像 ， 选 择 该 工具 后 ， 在 变形 区 域 单 击 鼠 标 或 拖 动 鼠 标 
光标 进行 涂抹 ， 可 使 图 像 恢复 到 变形 前 的 效果 。 
让“ 禄 钙 工 具 ”( 事 : 用 于 使 像素 向 画笔 区 域 的 中 心 移动 ， 使 图 像 产 生 内 缩 效 果 。 
让 “膨胀 工具 " 图 : 用 于 使 像素 向 画笔 区 域 中 心 以 外 的 方向 移动 ， 使 图 像 产 生 向 外 膨胀 ， 扩 
大 图 像 的 效果 。 
户 “ 左 推 工具 ”国有 J 用 于 设置 像素 移动 的 方向 ， 当 向 上 拖 动 光标 ， 像 素 会 向 左 移 动 ; 向 下 拖 
动 光标 ， 像 素 会 向 右 移动 ; 按 住 Alt 键 再 进行 拖 动 ， 则 沿 上 述 相反 的 方向 移动 。 
让 “ 抓 手工 具 ” 罗 有: 选择 该 工具 ， 可 在 图 像 预览 窗口 中 抓 取 图 像 ， 以 查看 图 像 显示 区 域 。 
人 介 “ 缩 放 工 具 ” 加 |]: 选择 该 工具 ， 在 图 像 预览 窗口 上 单 击 息 标 ， 可 放大 /缩小 图 像 显 示 区 域 。 


LE 
和 


四 制作 “对话” 图像 
巩固 图 层 的 使 用 方法 。 巩固 图 层 样式 的 使 用 方法 。 


. , 进一步 掌握 渡 镜 的 添加 与 设置 方法 。 Hh 


让 习 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


本 例 使 用 图 层 滤 镜 以 及 图 层 混合 模式 制作 一 
种 超 现实 的 效果 ， 扩 展 画 布 大 小 ， 再 在 其 中 输入 TALK 
广 本 ， 最 后 为 文本 图 层 设置 图 层 样式 。 其 最 终 效 city to city 
果 如 右 图 所 示 。 有 
在 Photoshop 中 ， 打开“ 背景 jpg” 和 “城市 jpg” 
图 像 文 件 。 


JSTER 02。。 新 建国 


1.， 选择 【 窗口 ] /【 图 层 】 命令 ， 打 开 “ 图 层 ” 
面板 。 在 “城市 ”图 像 的 “图 层 ” 面 板 中 ， 
双击 “背景 " 图 层 。 打开" 新建 图 层 ”对 话 框 ， 
在 其 中 单 击 EEEBE 9 按钮， 将 背景 图 层 转换 
为 普通 图 层 。 

2.， 使 用 “矩形 选 框 工 具 ” 国 在 图 像 上 绘制 一 个 
选区 。 


| 新建 加 层 


沂 


名 种 (N): 图 


颜色 (c): x 无 - 
楼 aK(M): 正常 一 不 通明 度 (0): 100| |% 


> 由 于 “城市 ”图 像 过 长 ， 当 “城市 ” | 
图 像 移动 到 “背景 ”图 像 中 时 ， 图 像 两 端 比较 ， 
有 特色 的 建筑 无 法 正常 显示 ， 所 以 这 里 需要 新 ， 
, 建 选区 ， 将 图 像 两 端的 建筑 移动 使 其 靠近 一 些 。 


可 
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AGER 03。。 移动 图 像 


1. 在 工具 箱 中 选择 “移动 工具 ”图 。 
2. 按 住 Shift 键 的 同时 ， 使 用 鼠标 向 左 移动 
辐 像 。 按 Ctrl+D 组 合 键 ， 取 消 选区 。 


按 住 Shif 键 的 同时 移动 图 像 ， 可 


丈 
襄 
户 
国 
党 
这 
并 
渤 
于 
加 
头 
尿 
RS 
站 
小 
庄 
有 
卫 


像 移 
动 到 “背景 ”图 像 中 。 er 
2， 按 CtrltT 组 合 键 ， 将 “城市 ”图 像 放 大 
到 与 “背景 ”图 像 一 样 大 。 Te 


本本、 于 图 后 混 合 模式 :€ 


1.， 在 “图 层 " 


[En 


板 中 ， 双 击 “ 背 景 ”图 层 ， 


打开 “新 建 攻 


按钮 ， 将 背 
建 的 “图 层 


昌 . 
京 


0" 


层 ” 对 话 框 , 单 击 下 栈 汪 
图 层 转换 为 普通 图 层 。 将 新 
移动 到 “图 层 1” 上 方 。 


2. 将 图 层 0 的 


图 


层 混合 模式 设置 为 “ 滤 色 ”。 


i 模糊 图 像 :€ 


选择 [ ; 


镜 】/【 模糊 】/[ 高 斯 模糊 ] 命 令 ， 


打开 “高 斯 模糊 ”对 话 框 。 在 对 话 框 中 

设置 “半径 " 为 “2”。 
2， 单 击 ED 按钮 。 和 pS 
3， 选择 [ 图 像 ]/[ 画布 大 小 ] 命 令 , 打开 “ 画 a 

布 大 小 ”对 话 杠 ， 在 “定位 ” 栏 中 单 击 3 一 

按 和 @。 OEE 
4. 设置 “高 度 ” 为 “45”。 MEK 740 

砍 守 [WwW): 36.12 


5 单 击 巨 右 卫 按钮 。 


”在 “画布 大 小 ”对 话 框 的 “定位 ” | 


二 3) 单 击 ) 
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me 输入 文字 


“矩形 选 框 工具 ”图 ， 对 图 像 中 的 透明 区 


th 并 为 选区 填充 白色 。 


2. 


3. 


取消 选区 选择 “ 横 排 文字 工具 ” 国 ， 在 其 工 
县 属性 栏 中 设置 "文字 系列 、 文 字 大 小 "为 "Tw 
Cen MT、90 点 ”。 

使 用 鼠标 在 图 像 上 方 单 击 ， 输 入 文字 。 


TALK 
city to city 


机 二 样式 


14: 
2: 


在 “图 层 ” 面 板 中 ， 双 击 “TALK” 图 层 。 
打开 “图 层 样式 ”对 话 框 ， 在 “样式 ”列表 
框 中 选中 回 投影 复 选 框 。 

设置 “不 透明 度 、 距 离 、 扩 展 、 大 小 " 为 “61、 
8、 11、13"” 。 

单 击 ER 二 汪 按 钮 。 


10.3 练习 1 小 时 


角度 :| 习 共 司 人 全 局 
JE 人 
直人 

kr 一 一 一 一 三 。 | 作 素 


本 章 主要 介绍 了 图 像 编辑 与 色彩 调整 、 使 


图 层 和 滤 镜 美化 


工作 中 熟练 使 用 它们 ， 还 需 再 进行 巩固 练习 。 


和 


识 的 使 用 方法 。 
制作 “童话 ”图 像 


本 例 将 练习 制作 气泡 效果 ， 通 过 新 建 图 
层 ， 绘 制 选区 填充 图 像 ， 再 为 图 层 设 置 图 层 
样式 ， 最 后 将 制作 的 气泡 复制 到 图 像 的 其 他 
位 置 ， 其 最 终 效果 如 右 图 所 示 。 


下 面 以 制作 “童话 ” 


图 像 的 知识 ， 用 户 要 想 在 日 党 


图 


像 为 例 ， 进 一 步 巩固 这 些 


vo 


网 页 设计 技巧 让 


学 习 nt: @ 网 页 制作 原理 以 及 技巧 
aonoasnoasaoesssesdasedaaoaoss asssssse @ 原 
掌握 了 网 页 制作 的 方法 ， 并 学 会 动画 、 图 像 : nt 
的 制作 及 编辑 方法 后 ， 即 可 根据 实际 需要 制作 一 : 。 册页 局面 布局 设计 
个 完整 的 网 页 。 在 制作 网 页 时 ， 用 户 还 需 了 解 一 : @ 内 页 eat 
些 网 页 设计 的 技巧 ， 使 网 页 效果 更 加 美观 ,如 网 : ® 图 文 搭配 方法 
页 制作 的 原理 、 配 色 技巧 、 版 面 布局 技巧 和 图 文 : 
拱 配 技巧 等 : ©® @ 
上 机 小 时 


二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


11.1 学 习 1 小 时 


在 对 网 页 、 网 页 制作 工具 以 及 制作 网 站 的 一 些 基本 流程 和 技巧 有 所 了 解 后 ， 为 了 制作 出 优 
秀 的 网 页 效果 ， 最 好 对 网 页 的 制作 原则 和 设计 技巧 等 相关 知识 有 所 了 解 ， 这 样 才 能 设计 出 更 好 
的 网 站 。 下 面 将 对 网 页 的 设计 技巧 进行 讲解 。 


， 快速 了 解 网 页 制作 原理 以 及 技巧 。 Q 了解 网 页 配色 原则 。 
1 ”人 S 掌握 收集 网 站 素材 和 内 容 。 了解 图 文 搭配 方法 。 
[| 


1 饼 熟练 掌握 网 页 版 面 设计 技巧 。 jbl 


11.1.1 网 页 制作 原理 以 及 技巧 


在 制作 网 页 的 过 程 中 ， 遵 循 一 定 的 原则 和 技巧 ， 可 以 提高 网 站 的 质量 ， 使 网 站 达到 更 好 的 
效果 。 这 也 是 网 页 设计 师 所 必须 具备 的 专业 技能 。 

1. 网 页 制作 的 基本 原则 

在 制作 网 页 时 ， 用 户 不 能 随意 地 对 网 页 进行 编辑 。 因 为 一 些 不 良 的 习惯 可 能 会 使 网 站 无 法 
运行 ， 或 使 网 站 后 期 维护 起 来 很 麻烦 。 在 制作 网 站 时 必须 遵循 以 下 几 个 制作 原则 。 

个 整体 规划 : 在 制作 网 站 的 前 期 就 一 定 要 对 网 站 进行 整体 的 规划 ， 合 理 安排 站 点 中 的 各 项 内 
容 ， 使 网 站 中 不 会 出 现 多 余 或 未 完善 的 网 页 。 

个 站 名 创意 : 目前 网 络 上 的 网 站 有 很 多 ， 怎 样 才能 使 自己 制作 的 网 站 从 中 脱颖而出 ， 获 得 更 
多 的 点 击 量 ? 其 最 简单 的 方法 就 是 为 站 点 取 个 有 创意 的 名 称 ， 有 创意 的 站 名 能 给 浏览 者 留 
下 较 深 的 印象 ， 利 于 网 站 的 宣传 和 推广 。 给 站 点 取 名 时 应 基于 简洁 、 易 记 以 及 与 站 点 内 容 
相符 的 基础 上 ， 合 适 的 网 站 名 称 以 及 配套 的 域名 能 更 好 地 让 浏览 者 记 住 你 的 网 站 。 

个 鲜明 的 主题 ， 网 页 的 标题 内 容 不 能 太 长 太 复杂 ， 主 题 内 容 需要 醒目 抢眼 、 针 对 性 强 ， 否 则 
浏览 者 不 容易 抓 住 重点 。 

人 统一 网 页 格式 : 为 了 让 大 多 数 浏览 者 可 正常 地 浏览 网 页 ， 在 制作 网 页 时 还 需 考 虑 满 
足 800 x 600 像素 的 显示 器 。 使 用 漂亮 的 网 页 背景 可 填充 左右 两 侧 多 余 的 空白 空间 ， 使 
800 x 600 像素 的 网 页 在 分 辨 率 高 的 显示 器 中 也 显得 较为 美观 。 

个 动画 不 能 过 多 : 虽然 增加 动画 可 以 增强 网 页 的 视觉 感 ， 但 在 网 页 中 动画 不 宜 过 多 ， 因 为 动 
画 文件 通常 比较 大 ， 而 网 页 动画 过 多 会 降低 网 页 下 载 速度 ， 造 成 网 页 打开 速度 慢 ， 甚 至 不 
能 打开 网 页 的 状况 ， 适 得 其 反 。 

个 导航 要 明朗 : 普通 网 站 的 主页 导航 条 上 的 链接 项 目 不 宜 太 多 ， 最 好 只 限于 几 个 主要 页 面 
通常 用 6-8 个 导航 链接 较为 合适 。 大 型 的 商业 网 站 可 适当 增加 导航 链接 数 。 

所 图 像 优化 : 在 网 页 中 图 像 太 多 、 文 件 太 大 也 会 影响 网 页 下 载 的 速度 ， 可 使 用 图 像 处 理 软件 
对 图 像 进行 优化 ， 以 便 在 图 像 大 小 和 显示 质量 两 个 方面 取得 平衡 ， 网 页 中 的 图 像 一 般 都 为 
10KB 以 下 的 png 或 gif 文件 。 
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人 定期 更 新 : 定期 更 新 页 面 内 容 或 更 改 主页 的 样式 ， 才 能 让 浏览 者 对 网 站 保持 一 种 新 鲜 感 ， 
使 其 长 期 访问 ， 这 样 不 但 能 提高 点 击 量 ， 还 能 稳定 网 站 的 点 击 量 。 


2. 网 页 基本 元 素 的 标准 及 使 用 技巧 

大 部 分 的 网 页 都 有 Logo、Banner、 导 航 栏 、 按 钮 、 图 像 和 文本 等 网 页 元 素 ， 对 于 普通 的 
站 点 来 说 为 了 后 期 维护 方便 一 般 都 会 根据 规定 的 标准 对 这 些 网 页 基本 元 素 进行 制作 。 网 页 基本 
元 素 的 相关 标准 及 使 用 技巧 分 别 如 下 。 


(1) Logo 

Logo 是 网 站 的 标志 ， 通 过 形象 的 Logo 可 以 快速 让 浏览 者 对 网 站 进行 辨识 。 网 站 Logo 
可 以 是 独立 设计 ， 也 可 以 根据 本 企业 、 单 位 的 企业 Logo 修改 。 通 过 本 企业 Logo 修改 为 网 ; 
Logo 的 好 处 在 于 用 户 能 更 快 地 对 网 站 有 个 概念 。Logo 的 位 置 通常 在 网 页 的 左上 角 ， 也 可 根据 
需要 将 它 置 于 其 他 任意 位 置 。 为 了 更 有 突出 感 ， 一 些 站 点 的 Logo 可 以 设计 为 动态 的 ， 但 不 是 
所 有 的 站 点 都 使 用 动态 Logo， 使 用 动态 Logo 的 网 站 一 般 都 是 个 性 网 站 。 企 业 、 组 织 类 的 网 站 
都 会 采用 静态 网 站 。 如 下 图 所 示 为 果 壳 网 、 时 光 网 和 豆 办 网 的 Logo。 


MA 


(2) Banner 

Banner 是 指 网 站 中 的 横幅 广告 , 它 的 尺寸 标准 有 许多 ,如 468 x 60 像素 ( 全 尺寸 Banner ) 、 
392 x 60 像素 ( 全 尺寸 导航 条 Banner ) 、234 x 60 像素 ( 半 尺 寸 Banner ) 、125 x 125 像素 ( 方 行 
按钮 ) 、120X 90 像素 ( 按钮 类 型 1 ) 、120 x 60 像素 ( 按钮 类 型 2 ) 、88x31 像素 ( 小 按钮 类 型 ) 
及 120Xx240 像素 ( 垂直 Banner ) 等 。 其 中 ，468 Xx 60 像素 和 88 x 31 像素 的 Banner 用 得 最 多 ， 
468 X 60 的 Banner 像素 应 大 致 在 15KB 左右 ， 最 好 不 要 超过 22KB， 而 88 x 31 像素 的 Banner 
最 好 在 SKB 左右 ， 不 要 超过 7KB。 


(3 ) 导航 栏 
导航 栏 的 作用 是 引导 浏览 者 对 网 站 中 的 网 页 进行 分 类 浏览 。 常 见 的 导航 栏 可 以 通过 放置 的 
位 置 分 为 横 排 和 竖 排 两 种 ， 而 根据 表现 形式 ， 导 航 栏 有 图 像 导航 、 文 本 导航 和 框架 导航 等 。 在 
一 些 简 单 的 网 站 或 是 商业 网 站 导航 栏 是 静态 的 ， 而 一 些 个 性 网 站 其 导航 栏 通常 是 动态 的 ， 如 
脚本 编写 的 导航 栏 或 Flash 导航 栏 。 导 航 栏 的 制作 要 点 可 归纳 为 以 下 几 点 : 
个 在 导航 栏目 不 多 的 情况 下 ， 通 常 采用 一 排 的 设计 ; 如果 导 航 栏目 太 多 ， 才 会 考虑 分 两 排 其 
至 多 排 进 行 横向 排列 。 
所 内 容 丰 富 的 站 点 可 以 使 用 框架 导航 ,这样 不 管 进入 哪个 页 面 都 可 以 快速 跳 转 到 男 一 个 
栏目 。 
如 图 片 导航 的 外 观 可 以 随意 设计 ， 如 设计 的 图 片 导航 虽 漂 亮 ， 但 占用 的 文件 空间 较 大 ， 会 影 
响 网 页 下 载 。 
(4) 按钮 
对 于 网 页 按钮 来 说 ， 用 户 可 以 根据 网 站 主题 随意 对 大 小 和 形状 进行 设计 。 但 在 制作 按钮 时 
需 注意 ， 按 钮 要 和 网 页 的 整体 效果 协调 ， 不 能 太 抢眼 。 在 制作 按钮 时 一 般 可 以 采用 背景 较 淡 ， 
字体 较 深 ， 或 是 较 强 对 比 度 的 颜色 。 如 下 图 所 示 为 各 网 站 中 不 同 的 按钮 。 
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(5) 文本 自 大 溪 地 贴 十 
网 页 内 容 中 最 主要 的 元 素 就 是 文本 ， RR Bigs 上 大 当下 作答。 导入 时 间 
进行 文本 编辑 可 以 使 页 面 看 起 来 更 加 工整 | os 
有 阅读 兴趣 ， 这 样 无 形 中 也 能 留 住 不 少 浏 | 
览 者 9 如 右 图 所 示 为 一 家 旅游 网 站 的 旅游 oa eb 其 称 为 -上帝 轴 昭 的 礼 攀 ~ 大 源 地 又 评 增 新 捏 赢 有 有 理 之 和 Leve trans 之 
景点 介绍 概述 的 文本 排版 。 文 本 制作 的 技 。 | staasnisXa Xow 人 trom Ra 人 
巧 如 下 : tm nt, Tet a AoA 
人 文本 的 闫 色 要 与 背 景 有 区 别 使 浏 览 a 这 里 是 全 世界 十 大 新 前 宣 月 桃源 之 一 ， 富 比 
者 能 轻松 地 识别 文本 ; 但 不 能 使 用 与 土 更 在 2005 年 将 之 评选 为 专 界 县 性 局 的 小 乌 ， 黎 非 浆 得 虑 名。 
背景 颜色 对 比 度 过 高 的 颜色 ， 否 则 可 Te 
- 后 上 训 风 全， 并 里 届 下 式 的 水 上 导 2 让 ， 流 尖 训 上 于 地标， 化 一 由 划 大 里 。 说 一 机 的 区 
能 会 使 文字 太 抢 眼 。 硬 ， 轩 向 水 怕 了 各 站 ”如 省 的 床下 而 旨 大 海 ， 春 玫 花 开 ， 从 然 地 入 主人 的 到 未 。 


个 为 使 版 面 看 起 来 不 凌乱 ， 在 同 版 面 中 的 文本 样式 最 好 在 3 种 以 内 。 
人 办 每 行文 字 的 长 度 最 好 控制 为 20-30 个 中 文字 ， 使 用 户 不 会 失去 阅读 兴趣 、 此外， 段落 与 
段落 间 应 空 一 行 ， 首 行 应 设置 缩 进 ， 以 便于 阅读 。 


(6) 图 像 
如 果 说 文字 是 网 站 的 灵魂 ， 那 么 图 像 就 是 网 页 为 增加 魅力 的 外 衣 。 在 使 用 图 像 尤 其 是 以 图 
片 为 主 的 网 页 时 首先 要 考虑 它 对 网 络 速度 的 影响 ， 使 用 图 像 需 注 意 以 下 几 点 : 


个 一 般 情况 下 图 像 多 采用 淡色 系列 的 背景 ， 这 样 能 与 主题 分 离 的 则 用 浅 色 标志 或 文字 背景 。 
但 有 些 需要 视觉 冲击 力 的 图 像 则 可 能 会 使 用 背景 色 对 比 度 高 的 色 系 图 像 。 

个 图像 的 主题 清晰 可 见 ， 图 像 的 含义 简单 明了 。 并 不 是 每 个 浏览 者 都 会 注意 到 网 页 设计 者 的 

用 意 或 是 设计 的 一 些小 细节 。 

公 图 像 所 含 文字 要 求 清晰 可 辨 ， 否 则 会 使 浏览 者 对 网 站 产生 负面 想法 。 背 景 与 主体 明度 对 比 
应 大 致 在 3:] 到 5:] 之 间 ， 这 样 的 明度 对 比 可 让 更 多 浏览 者 接受 。 


个 


11.1.2 网 页 配色 原理 
色彩 是 直接 影响 人 视觉 感 的 元 素 ， 用 好 颜色 能 为 一 个 网 站 的 整体 效果 添砖加瓦 。 很 多 用 户 
往往 会 通过 颜色 对 网 站 有 一 个 最 初 的 印象 ， 下 面 将 对 网 页 的 一 些 配 色 原 理 进行 讲解 。 
1. 色彩 搭配 技巧 
合理 搭配 色彩 可 以 使 网 页 效果 锦上添花 。 色 彩 搭配 原则 是 整体 色彩 效果 和 谐 ， 而 在 局 部 、 
小 范围 的 地 方 可 以 有 一 些 强 烈 色彩 的 对 比 。 在 进行 配色 时 ， 可 使 用 以 下 几 种 常见 的 色调 进行 


刀 以 红色 为 主 的 搭配 : 给 人 以 温暖 、 热 情 和 
大 气 的 感觉 ， 下 图 为 一 个 格斗 游戏 的 官方 网 
站 ， 采 用 红色 为 基调 ， 以 突出 游戏 的 热血 与 
激情 。 让 浏览 者 在 浏览 网 站 时 ， 就 已 经 感受 
到 游戏 带 来 的 刺激 感 。 


WAARIOR 


RE 
MAEE 


下 以 粉色 为 主 的 搭配 : 粉色 象征 着 浪漫 、 温 
馨 ， 常 被 用 于 向 观众 传递 爱情 、 幸 福 、 甜 密 
和 可 爱 的 感觉 ， 在 一 些 以 女性 或 婴 幼 儿 为 受 
众 群 体 的 网 站 上 常见 到 以 粉色 为 基调 的 配色 
方案 。 
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上 经 验 一 敌 售 一 一 如 何 确定 网 站 的 主 色调 
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如 以 黑白 为 主 的 搭配 : 黑 、 白 配搭 看 似 最 简 
单 的 组 合 , 但 往往 又 是 最 不 容易 控制 的 组 合 ， 
两 者 搭配 可 以 产生 很 多 不 同 的 效果 ， 比 如 下 
图 体现 的 就 是 时 尚 、 酷 炫 的 现代 气息 ， 非 常 
符合 时 下 年 轻 人 特 立 独行 的 心态 。 


WoRKS 


但 以 黄色 为 主 的 搭配 : 黄色 用 于 表示 警示 或 
危险 ， 如 各 种 抢修 车 辆 、 施 工 现场 的 安全 警 
示 标 志 等 ， 但 有 时 候 黄色 也 可 以 用 于 传递 真 
诚 、 安 全 、 幸 福 及 值得 信赖 等 感觉 。 


不 同 的 色调 令 访问 者 产生 的 直观 感受 会 有 所 不 同 ， 要 选择 适合 的 网 页 配色 风格 就 必须 了 解 色 彩 
对 人 产生 的 心理 效果 。 如 红色 、 橙 色 和 黄色 等 都 给 人 以 温暖 的 感 党 ， 它 们 也 被 称 作 暖 色调 ; 而 


绿色 、 蓝 色 等 给 人 以 清爽 、 凉 快 的 感觉 ， 
点 为 基础 ， 选 择 适 宜 的 颜色 。 


2. 网 站 的 配色 方案 


它们 被 称 作 冷 色调 。 进 行 配色 时 一 定 要 以 网 页 自身 特 


色彩 对 传达 网 页 作品 的 


题 具 有 非常 重 


的 作用 ， 好 的 配色 方案 不 仅 能 在 视觉 上 给 浏览 者 


以 美的 享受 ， 而 且 还 能 充分 展现 网 站 的 风格 ， 营 造 出 理想 的 浏览 氛围 。 
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色彩 对 事物 的 表现 力 有 着 其 他 形式 无 法 比拟 的 绝 佳 效 果 。 作 为 网 页 设计 师 ， 掌 握 色彩 运 
原理 ， 并 熟知 各 种 色彩 对 访问 者 心理 的 影响 ， 结 合 自 己 所 具备 的 平面 构图 知识 ， 在 网 页 设计 
准确 用 色 ， 才 能 有 效 地 传达 特定 信息 并 充分 泻 染 网 站 的 主题 氛围 。 如 下 面 所 示 即 为 一 些 常用 的 
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11.1.3 ”收集 网 站 的 素材 和 内 容 


在 制作 网 站 时 ， 用 户 需要 使 用 很 多 的 素材 资源 ， 如 文字 、 图 像 、 视 频 、 音 频 或 动画 等 ， 要 
想 使 图 像 处 理 的 效果 更 加 具有 美感 ， 素 材 的 选择 和 获取 是 非常 重要 的 。 
1. 素材 的 收集 原则 
素材 是 指 为 创作 、 编 辑 所 需 内 容 而 准备 的 各 种 原始 资料 ， 合 理 选 用 素材 有 助 于 提高 用 户 制 
作 图 像 、 动 画 和 网 站 页 面 的 速度 ， 并 提升 网 站 的 整体 效果 。 选 择 素材 时 需要 遵循 一 定 的 原则 ， 
现 分 别 介绍 如 下 : 
人 遵循 “ 宁 多 勿 少 ”的 原则 ， 多 准备 或 收集 一 些 需 要 使 用 或 是 相关 的 素材 ， 以 备 不 时 之 需 。 
各 收集 素材 时 应 根据 具体 的 需要 来 考虑 ， 要 与 实际 制作 的 内 容 紧 密 对 应 ， 不 能 与 主题 相 冲突 ， 
也 不 能 为 了 表达 某 种 效果 而 滥用 素材 。 
侣 在 进行 网 站 制作 前 ， 就 应 该 进行 素材 的 收集 与 准备 ， 考 虑 好 应 该 使 用 哪 种 素材 、 用 在 何 处 
以 及 如 何 使 用 等 ， 尽 可 能 避免 一 边 处 理 素材 ， 一 边 收集 或 考虑 素材 使 用 的 情况 


2. 素材 的 获取 方式 


了 解 选 择 素材 的 原则 后 ， 就 可 以 进行 素材 的 获取 了 ， 目 前 获取 素材 常用 的 几 种 方法 介绍 
如 下 : 
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介 通 过 网 络 进行 搜索 ， 如 百度 、Google 和 必 应 Bing 等 搜索 引擎 。 它 们 的 使 用 方法 都 很 类 似 ， 
并 且 在 搜索 前 都 可 选择 素材 的 类 别 。 

四 在 专门 的 素材 网 站 中 获取 ， 目 前 常用 的 素材 网 很 多 ， 如 昵 图 网 (http://www.nipic.com ) 、 素 
材 中 国 (http:/www.sccnn.com ) 、 站 酷 网 (http://www.zcoolcom.cn ) 、 闪 吧 (http://www. 
flash8.net ) 等 。 

但 制作 需要 的 素材 或 购买 专用 素材 光盘 等 。 

直通 过 数码 设备 获取 ， 如 使 用 数码 相机 自行 拍摄 的 照片 或 影片 ， 使 用 录音 设备 进行 录音 等 。 


11.1.4 网 页 版 面 布局 设计 

在 网 页 设计 规划 阶段 ， 最 需要 考虑 的 问题 是 如 何 设计 网 页 布局 样式 ， 它 对 整个 网 站 的 最 终 
呈现 效果 起 着 至 关 重 要 的 作用 ， 就 如 同 建造 大 楼 之 前 绘制 的 图 纸 一 样 。 设 计 、 制 作 网 页 前 的 布 
局 设计 不 但 直接 关系 到 页 面 结 构 的 合理 性 ， 同 时 还 在 一 定 程度 上 映射 出 该 网 站 的 类 型 定位 。 目 
前 常见 的 网 页 版 面 布 局 有 如 下 几 种 。 
则 “国字 型 ”网 页 布局 方式 : 上 端 为 网 站 标 ”四 “标题 正文 式 ” 网 页 布局 方式 : 最 上 方 为 
题 、 广 告 条 等 ， 中 间 为 正文 ， 左 右 分 列 两 栏 ， 通栏 的 标题 、 导 航 条 ， 下 方 是 正文 部 分 ， 这 
用 于 放置 导航 、 工 具 栏 等 , 下方 是 站 点 信息 ， 种 页 面 布局 方式 一 目 了 然 、 针 对 性 强 。 
这 是 最 为 常见 的 一 种 网 页 布局 方式 。 


“pe 莉 ED10 万 商品 低 至 1 折 mm 
[ WU .wow ww 


全 MATTERHORN wnren sommen werren sence rman A 


二 和 

全 二 4 折算 竺 由 己 4 
人 ave wwew nem 
Re 目 二 i 
低 至 折 
* [ 


10 万 商品 低 至 1 折 图 


ChETEEEDNY TREE 


4 2 


和 “拐角 型 "网 页 布局 方式 与 “国字 型 "相似 ， ” 贿 “封面 式 ” 网 页 布局 方式 : 常用 于 形象 宣 
上 面 是 标题 及 广告 横幅 等 ， 左 侧 、 右 侧 较 窄 。” 传 网 站 首页 ， 常 以 精美 大 幅 图 像 为 主题 ， 设 
的 一 栏 放 链 接 一 类 的 功能 ， 另 一 侧 为 正文 ， 计 方 式 多 为 Flash 动画 。 

下 面 为 站 点 信息 。 


12 
Hour: 


二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


上 1 经 验 一 筹 能 一 一 网 页 布局 的 选择 方式 


不 同类 型 的 网 站 因为 其 自身 的 特点 应 该 选择 不 同 的 布局 方式 ， 如 门户 类 网 站 由 于 其 内 容 承 载 量 
大 ， 通 常会 采用 国字 型 页 面 布局 ， 以 便 在 有 限 的 页 面 范围 容纳 更 多 内 容 和 功能 ; 而 搜索 引擎 类 
的 网 站 往往 以 简捷 的 标题 正文 型 布局 来 展现 ， 以 便 最 大 限度 地 提高 使 用 者 的 访问 速度 ; 展示 类 
网 站 为 展现 产品 或 服务 的 特点 ， 常 会 以 具有 极 强 视觉 冲击 力 的 封面 型 布局 来 加 深 访问 者 对 主题 
的 印象 。 


11.1.5 图 文 搭配 方法 

在 进行 图 像 处 理 或 网 页 版 面 排 列 时 ， 都 需要 将 图 片 和 文字 搭配 使 用 ， 以 丰富 图 像 、 网 页 内 
容 ， 明 确 主题 。 因 此 要 掌握 合理 的 图 文 搭配 的 方法 ， 使 图 像 表 达 效 果 事倍功半 。 常 见 的 图 文 拱 
配方 法 有 如 下 几 种 。 

四 上 下 型 : 是 指 将 版 面 分 为 上 、 下 两 部 分 ， 一 部 分 配置 图 片 ， 另 一 部 分 配置 文字 。 这 种 搭配 
方法 可 以 表达 安静 平稳 的 感觉 ， 但 版 面 较为 呆板 。 此 时 可 选取 较为 活 小、 动感 的 图 片 进行 
搭配 。 

和 内 左右 型 : 是 指 将 版 面 分 为 左 、 右 两 部 分 ， 左 侧 配置 图 片 ， 右 侧 配 置 文字 或 小 图 片 。 采 用 这 
种 形状 进行 搭配 应 尽量 加 强 两 侧 的 明暗 对 比 强度 。 

从 倾斜 型 是 指 将 图 片 倾斜 放置 或 将 画面 儿 向 分 割 ， 使 呆板 的 版 面 变 得 活泼 。 

人 各 中 心性 : 是 指 将 图 片 或 重点 突出 的 元 素 配置 在 画面 中 心 ， 以 突出 画面 主题 。 

从 强调 型 : 是 指 将 图 片 或 文字 放 在 上 下 / 左右 两 端 ， 产 生 一 种 稳定 的 效果 。 

个 并 列 型 : 是 指 将 图 片 以 相同 的 大 小 和 面积 并 列 放置 在 一 起 ， 另 一 侧 放置 文字 。 


Jan 


11.2 上 机 1 小 时 


本 例 将 利用 本 章 所 学 习 到 的 知识 ， 使 用 Photoshop 制作 一 个 “拐角 型 ”网 页 布局 的 “电影 
宣传 网 站 ”网 站 首页 ， 完 成 后 的 效果 如 下 图 所 示 。 


目 目 EJEI 汪 占 制作 电影 宣传 网 站 


久 巩固 图 层 以 及 剪贴 蒙 版 的 使 用 方法 。 


”进一步 掌握 文字 的 输入 以 及 编辑 方法 。 | 


站 提现 场 现 饮 名片 ” 演员 位 组， 

认 
舞动 青春 。 “0 
SY 
“S33 


\ 制作 电影 宣传 网 站 


STEROf: 


1. 


3. 


新 建 一 个 1280 x 820 像素 的 空白 文档 ， 将 
前 景色 设置 为 “ 深 红色 (#a90100 ) ”。 按 
Alt+Delete 组 合 键 ， 使 用 前 景色 填充 背景 。 
选择 【 滤 镜 】 /【 杂 色 】/【 添加 杂 色 】 命 令 
打开 “添加 杂 色 " 对话 框 , 在 其 中 设置 “数量 " 
为 “3” 。 

单 击 巨 二胡 二 刁 按钮 。 


STEP 02， 


在 


使 用 “和 矩形 选 框 工具 ” 国 在 图 像 上 绘制 一 个 


矩形 选区 。 在 “工具 箱 ” 中 选择 “加 深 工具 ” 


回 。 
2. 


在 其 工具 属性 栏 中 , 设置 “画笔 大 小 、 曝 光度 ” 
为 “120、5%"”。 

使 用 鼠标 在 矩形 选区 上 面 进行 涂抹 ， 对 选区 
上 部 分 的 颜色 加 深 。 按 Ctrl+D 组 合 键 ， 取 消 
选区 。 


ba S bd S S ® bd bd 


Ee 


江 全 (A): 了 |% 


EE = 
?9345(2) 设 置 
加 高 分 机 (5) 


习 音 gd) 


EO” 使 用 加 深 工具 加 深 图 像 的 局 部 颜色 
是 为 了 使 之 后 插入 的 人 物 图 像 更 有 立体 感 。 


Hours 


Hourd 


Hours 


Hours 


Hourg 


Hour 
从 


[六 有 ;站 和 新手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


从 TEBI03 轩 绘制、 编辑 椭圆 图 像 

1. 新 建 图 层 1， 使 用 “椭圆 选 框 工具 ” 国 在 图 
像 右 边 绘制 一 个 椭圆 选区 ， 并 使 用 “黄色 
( #ff55c ) ”填充 选区 。 

2.， 将 图 层 1 的 图 层 “ 混 合 模式 、 不 透明 度 ” 设 
置 为 “过 加 、30”。 按 CtrltD 组 合 键 ， 取 消 
选区 。 


绘制 一 个 椭圆 是 为 了 制作 一 个 背景 
上 出 现 光影 的 效果 。 


WSTEP 04; > 模糊 椭圆 
= 1 选择 【小 镜 】/【 模糊】/ 【高 斯 模糊 】 命令 ， 
打开 “高 斯 模糊 "对 话 框 , 设置 "半径 "为 "30" 。 

72 口 2， 单 击 ER 按钮 


娄 ， 
i 


并 不 像 光源 投影 在 图 像 上 的 效果 ， 所 以 必须 通 
过 滤 镜 将 其 模糊 。 


SITEPI05 全 抠 取 图 像 
1， 打开 “人 物 jpg” 图 像 ， 在 “图 层 ” 面 板 中 双 


击 “背景 " 图 层 , 将 背景 图 层 转换 为 普通 图 层 ， 

使 用 “钢笔 工具 ”项 沿 人 物 边 缘 绘 制 路 径 。 
2.， 打开“ 路 径 ”面板 ， 选 择 路 径 。 单 击 国 按 钮 ， 

将 路 径 转换 为 选区 。 选 择 [ 选择 )[ 反 向 命令 ， 

反选 选区 。 按 Delete 键 ， 删 除 图 像 。 使 用 相 
司 的 方法 将 人 物 其 他 部 分 的 白色 背景 去 掉 。 


STEP06 且 添加 素材 

1 使 用 “移动 工具 ” 国 ， 将 抠 取 的 人 物 图 像 移 
动 到 “电影 宣传 网 站 ”中 。 

2， 双击 图 层 2, 打开 “图 层 样式 " 对 话 框 ,在 “ 样 
式 ” 栏 中 ， 选 中 加 和 复 选 框 ， 单 击 EEC 
按钮 ， 为 图 层 添加 投影 图 层 样式 。 


网 页 设计 技巧 


SITEP07 绘制 形状 

1. 新 建 图 层 3， 使 用 “和 矩 形 选 框 工具 ”图 在 
图 像 的 上 下 方 建立 选区 ， 并 使 用 “ 深 红色 
(#3e0000 ) ”填充 。 在 使 用 “矩形 选 框 工 
具 ” 图， 在 人 物 图 像 右边 绘制 一 个 矩形 选区 ， 
并 使 用 “白色 ( #FFFFFF ) ”填充 。 
2. 双击 图 层 3, 打开 “图 层 样式 ” 对话 框 , 在 “ 样 
式 " 栏 中 , 选中 画 反 时 复 选 框 , 设置 “不 透明 度 ” 
为 “40%”， 单 击 EEEBE 按钮 ， 为 图 层 添 


加 投影 图 层 样 式 。 


NS 


STEPI08 且 ”输入 文字 
0 入 志 现 二 昌 。 请 介绍 ”出 代 1.， 按 CtritR 组 合 键 ， 显 示 标尺 ， 为 图 像 添加 辅 。。 = 
[2 输入 助 线 。 
2， 选 择 “ 文 字 工 具 ” 图， 在 工具 属性 栏 中 设置 。 72 口 
"文本 系列 、 文 本 大 小 、 颜 色 ” 为 “ 汉 真 广 标 、 
24 上 点、 白色 ( 帮 FFFFF ) ”。 单 击 国 按 钮 ， 
使 用 鼠标 在 图 像 上 方 输入 导航 条 内 容 。 
3.， 在 图 像 下 方 输入 网 站 许可 内 容 文本 ， 并 设置 
该 段 文本 的 “文本 系列 、 文 本 大 小 " 为 "黑体 、 62 《 


8 点 ”。 


STERI09> 编辑 场景 图 像 


打开 “场景 jpg” 图像 使 用 “移动 工 “站 雪 贡 场 机 往 旭 片 ” 六 中 妇 ”出 上 他 到 
具 " 国 , 将 其 移动 到 "电影 宣传 网 站 "图 像 中 ， pe 
将 其 缩小 后 放置 在 图 像 左上 方 ， 衬 于 文字 
层 下 方 。 按 住 Shift+Alt 组 合 键 的 同时 ， 
再 次 使 用 "移动 工具 "图 将 图 像 向 右边 移动 ， 
达到 复制 图 像 的 目的 。 共 复制 4 次 。 
1， 在 "图 层 " 面板 中 选择 所 有 的 场景 图 像 图 层 ， 
按 Ctrl+E 组 合 键 合 并 图 层 。 在 “图 层 ” 面 
板 中 ， 将 合并 后 图 层 的 图 层 混合 模式 设置 
为 “线性 减 淡 ( 添加) ”。 


3 
An 
入 而 二 及 场 “各 窜 同 语 ” 订 癌 和 窗 ”F 估 S 站 寺 人 


STEP 10: 输入 电影 标题 

1.， 使 用 “文字 工具 ” 国 在 图 像 左 边 输入 电影 

标题 ， 设 置 “文本 系列 、 大 小 ”为 “ 汉 仪 

网 倒 体 简 、60 点 ", 并 为 该 文本 图 层 添加 "外 
发 光 ” 图 层 样 式 。 

2. 将 “场景 .jpg” 和 “装饰 .png” 图 像 都 移 
动 到 “电影 宣传 网 站 " 图 像 中 , 并 将 其 缩小 。 


E22 到 的 了 二 让 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


SIERI1TS > 为 图 层 添 加 图 层 蒙 版 | 


人 


1.， 选择 图 层 5， 使 用 “ 拢 形 选 框 工 具 ” 国 沿 着 畏 
切线 绘制 选区 。 
2.， 在 “图 层 ”面板 中 ， 单 击 国 按 钮 ， 为 图 层 添 放 
图 层 蒙 版 。 将 图 层 的 图 层 混 合 模式 设置 为 “ 线 
性 减 淡 (添加 )”。 


STEPM2> 输入 演员 名 字 


1 将 添加 了 图 层 芝 版 的 图 层 复 制 两 次 ， 并 和 翅 到。 革 昌 N@obonloadbnin 
相应 的 位 置 。 


338 2， 使 用 “文字 工具 ” 国 ， 设 置 “ 字 体系 列 、 字 
体 大 小 ”为 “ 汉 仪 太极 体 简 、28 点 ”。 使 用 

Hours 鼠标 在 图 像 中 单 击 并 输入 演员 名 字 ， 并 为 它们 
设置 相应 的 颜色 。 


Wi” 漂 吕 站 本 FF 品 舍 、 


STERPI33> 添加 人 物 头 像 

1. 在 之 前 已 进行 抠 图 操作 的 “人 物 .jpg” 图 像 中 
使 用 “矩形 选 框 工 具 ” 国 选择 人 物 头 部 。 

2.， 将 其 移动 到 “电影 宣传 网 站 " 图像 的 人 名 前 方 ， 
并 将 其 缩小 。 使 用 相同 的 方法 ， 为 其 他 人 名 
添加 信物 头像 。 


11.3 练习 1 小 时 

本 章 主 要 介绍 了 网 页 设计 相关 技巧 ， 包 括 配色 原理 、 收 集 素 材 和 版 面 布 局 等 知识 。 用 户 
想 在 日 常 工作 中 熟练 使 用 它们 ， 还 需 再 进行 巩 国 练习 。 下 面 以 制作 “个 人 作品 网 站 ”图 像 为 例 ， 
进一步 巩固 这 些 知 识 的 使 用 方法 。 


制作 “个 人 作品 网 站 ”图 像 


本 例 将 练习 新 建 图 像 ， 在 其 中 绘制 选区 ， 填 充 
选区 ， 并 输入 文字 。 然 后 绘制 形状 ， 并 在 其 中 添加 
素材 图 像 。 其 最 终 效果 如 右 图 所 示 。 


vo 


综合 实例 演练 让 


军 


上 机 人 小 时 ; 。 制作 订餐 网 站 首页 图 像 
oooeosoossosssssssssscsossissosssa @@ 钊 作 了 RMWT 网 站 宣传 动画 
本 书 主要 对 制作 网 站 的 软件 一 Dreamweaver 。 @ 制作 订餐 网 站 首页 

CS6， 制 作 动画 的 软件 一 一 Flash CS6， 制 作 图 形 2 

图 像 的 软件 一 Photoshop CS6 的 使 用 方法 和 网 页 。 

制作 技巧 进行 介绍 。 网 页 制作 人 员 除 了 学 习 这 些 : 

知识 外 ， 还 需 不 断 进行 上 机 实践 ， 以 巩固 并 熟练 

这 些 软件 的 用 法 。 本 章 将 结合 这 3 个 软件 的 使 用 ， 
制作 一 个 订餐 网 站 ， 进 一 步 巩固 这 些 知 识 ， 使 用 
户 能 够 举一反三 。 


EE2 到 的 二 让 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


12.1 上 机 1 小 时 : 制作 订餐 网 站 首页 图 像 


前 各 行 浊 


的 公司 、 企 业 都 会 在 网 上 制作 公司 或 企业 网 站 ， 


于 宣传 、 销 售 商品 。 公 司 、 


企业 网 站 是 一 种 方便 、 快 捷 、 低 成 本 的 营销 渠道 。 本 例 制作 的 订餐 


站 首页 主要 是 用 于 展示 


家 食品 加 工 公司 的 产品 种 类 ， 并 在 其 中 展示 一 些 产品 信息 ， 以 方便 


12.1.1 实例 目标 
通过 本 例 的 制作 ， 全 面 巩固 Photoshop 的 使 用 方法 ， 主 要 包括 


编辑 、 图 层 样式 的 应 用 、 选 


户 进行 外 卖 订购 。 


文件 的 新 建 、 图 层 的 使 用 和 


区 的 使 用 和 调 色 命令 的 使 用 等 知识 ， 其 最 终 效果 如 下 图 所 示 。 


优惠 券 均衡 饮食 儿童 乐园 加 入 我 们 联系 我 们 


rT - 
EE Ee 


站 
十 胜 ? 姑 你 来 人 


六 守业 内 星 ， 与 mW 多 一 地 直 飞 他 全 新 志 肝 如 寄 之 省 一 让 科 了 生计 章宗 的 户 


ac 吉星 开 昌 于 经 条 全 光 
人 
英 邯 二 


12.1.2 制作 思 
本 图 像 的 制作 思路 大 致 可 以 分 为 3 个 间 


像 ， 第 二 部 分 是 绘制 辅助 线 ， 并 对 网 页 页 面 进 


可 ; 


12.1.3 ”制作 过 程 
下 面 详细 讲解 “订餐 网 站 首页 ”图 像 的 制作 过 程 。 


利 v5 评 秋 活 应 总 ， 兴 从 代表 


3 
昌 


关注 我 们 


分 ， 第 一 部 分 是 新 建 图 像 ， 并 填充 颜色 以 及 图 对 网 站 素材 
行 布局 ， 第 三 部 分 是 对 素材 进行 编辑 、 添 加 。 


综合 实例 演练 上 
1. 新 建 图 像 


下 面 首先 启动 Photoshop ， 然 后 新 建文 档 ， 并 填充 背景 色 ， 制 作 填 充 图 像 等 ， 其 具体 操作 


i - TE 新 建 图 像 


天 me ) 单 击 )| 启动 Photoshop, 选择 [文件 ]/[ 新 建 ] 命令 。 
mt - | ci 打开 "新建 "对 话 框 , 在 其 中 设置 "名称 、 宽 度 、 
人 可 一 高 度 、 分 辩 率 ”为 “订餐 网 站 首页 、1024、 


Ht(M): ReaH -EE 980、96”。 
有 肌 吉 (Ci 和 到 2， 单 击 E ME- 按钮 。 


天 和 加 兴 广 件 (O)。 :RGB E051965-2.1 
你 长 宽 比 00。 方形 入 


AGE 02 二 填充 背景 颜色 341 


将 前 景色 设置 为 “黄色 (#ffc600 ) ”， 按 Alt+ 
Delete 组 合 键 ， 使 用 前 景色 填充 二 


i 


Eg 制作 底 纹 图 像 


新 建 一 个 3x3 像素 的 图 像 文档 。 放 大 图 像 ， 
将 前 景色 设置 为 “黑色 ”。 

2. 新建 图 层 ， 并 隐藏 背景 图 层 。 

3. 在 工具 箱 中 选择 “铅笔 工具 ” 轩 ， 将 画笔 大 
小 设置 为 “1 像素 " 

4. 使 用 鼠标 在 图 像 上 拖 动 给 会 制图 形 。 


一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 32 
Hour 
个 


定义 图 像 
ae 3 1， 使 用 “矩形 选 框 工 具 ” 国 框 选 图 像 。 
四 oo | 2， 选 择 【 编辑 】/【 定义 图 像 ) 命令 ， 打 开 “ 医 
案 名 称 ” 对 话 框 ， 设置 “名 称 ”为 “ 底 纹 ”。 
3， 单 击 EE 已 按钮 。 5 
从 


让 习 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


人 


话 框 , 设置 “使用” 为 “图案” 。 在 “ 自 定 图 案 
下 拉 列 表 框 中 选择 刚刚 定义 的 “ 底 纹 ” 图 像 。 
2.， 再 设置 “不 透明 度 ” 为 “20”。 
3， 单 击 ED 按钮 。 


1 选择 【编辑 】/【 填充 】 命令， 打开 “填充 ”对 


| 为 背景 添加 一 些 简单 的 底 纹 ， 可 以 | 
| 增强 图 像 背 景 的 质感。 | 


2. 为 网 页 布局 


342 下 面 将 在 图 像 上 绘制 参考 线 以 确定 网 页 的 整体 布局 方式 ， 最 后 根据 绘制 的 参考 线 新 建 图 
层 ， 在 网 页 上 绘制 形状 ， 其 具体 操作 如 下 : 


RE 情人 绘 制 参 考 线 


按 CtritR 组 合 键 ， 显 示 标尺 。 将 鼠标 从 标尺 外 向 
图 像 中 拖 动 ， 以 绘制 垂直 、 水 平 参考 线 。 


若 想 移动 已 经 创建 好 的 辅助 线 ， 
在 选择 “移动 工具 ” 国 后 ， 选 择 需要 移动 的 
， 助 线 ， 扼 动 鼠 标 移动 。 


ER 


AGEE DO 有 绘制 导航 条 

1， 在 “图 层 "面板 下 方 单 击 国 按 钮 ， 新 建 一 个 
图 层 组 ， 并 新 建 图 层 1。 

2。 根据 参考 线 的 情况 ， 使 用 “矩形 选 框 工具 " 国 

在 页 面 上 方 和 下 方 建立 选区 ， 并 使 用 “红色 

(#c80000 ) ”填充 选区 。 按 Ctrl+D 组 合 键 ， 取 

消 选区 。 


耻 TEP033 绘制 内 容 框 


1.， 在 工具 箱 中 选择 “ 圆 角 和 卸 形 工具 ”图 。 在 


具 属 性 栏 中 设置 “工具 模式 ”为 “形状 ”。 


使 用 鼠标 在 图 像 上 拖 动 绘制 圆 角 和 矩形 ， 并 为 


其 填充 


颜色 为 “白色 (#FFFFFF ) ”。 


2. 设置 该 


图 层 的 “不 透明 度 ” 为 “26%”。 


继续 使 用 鼠标 在 图 像 上 拖 动 绘制 圆 角 和 矩形 ， 


为 其 


填充 不 同 的 颜色 效果 。 


STEEL04 且 -绘制 信息 边框 


1.， 新 建 图 


层 2， 并 将 其 重 命名 为 “信息 框 ”。 将 


前 景色 设置 为 “白色 ( 证 FFFFF ) ”。 在 工 


具 箱 中 
栏 中 设 
像素 、 


设置 “ 


选择 “画笔 工具 ” 园 ， 在 其 工具 属性 
置 “画笔 大 小 、 流 量 、 不 透明 度 " 为 “2 
100%、100%”。 


选择 “ 圆 角 和 矩形 工具 ” 轩 , 在 其 工具 属性 栏 中 ， 


工具 模式 ”为 “路 径 ”。 


3.， 使 用 鼠 
4 打开“ 
用 画笔 


标 在 图 像 中 绘制 一 个 圆 角 和 矩形 路 径 。 
路 径 ” 面板， 在 其 下 方 单 击 图 按 钮 ， 使 
为 路 径 描 边 。 


二 TEPI05 吉 制作 底 纹 图 层 


1. 新 建 图 
透明 度 
2 选择 “ 
设置 “ 


层 , 并 将 其 重 命名 为 " 底 纹 ”, 将 图 层 " 不 
”设置 为 “30%”。 

圆 角 矩 形 工具 " 图 , 在 其 工具 属性 栏 中 ， 
工具 模式 ”为 “像素 ”。 使 用 “ 圆 角 


矩形 


具 ” 国 在 图 像 下 方 绘制 3 个 圆 角 和 矩形 。 


3. 再 使 用 


"和 矩形 选 框 工具 ”图 ， 在 图 像 下 方 绘制 


一 个 矩形 选区 ， 并 使 用 白色 进行 填充 。 最 后 


取消 选 


区 。 


3 


合 实例 演练 


人 要 
沿 色 的 圆 角 矩形 是 为 了 在 之 
后 放置 企业 的 食品 分 类 


和 
LE 


读书 笔记 


有 六 i 吝 计 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


Pm 输入 导航 文字 


3. 使 用 鼠标 在 图 像 上 方 导航 栏 中 单 击 输入 导航 


中 设置 “字体 系列 、 字 体 大 小 ”为 
示 体 简 、16 点 ”。 


文字 。 


醒 
由 于 同上 订餐 比较 重要 ， 所 以 这 里 将 
“网 上 订餐 ”文本 设置 为 黄色 


3. 对 网 站 素材 进行 编辑 
下 面 将 打开 “苗条 .jpg”、 


“图 层 ” 面板 中 ， 新 建 一 个 “文字 ”图 层 组 。 
2. se “ 横 排 文字 工具 ” 国 ， 在 其 工具 属性 栏 


“ 汉 仪 醒 


AGE 二。 输入 其 他 文字 信息 


. 选择 “ 横 排 文字 工具 ” 国 ， 在 其 工具 属性 栏 


中 设置 “字体 系列 、 字 体 大 小 ”为 “黑体 、 
11 点 ”， 使 用 鼠标 在 图 像 中 间 和 下 方 输入 其 
他 文字 信息 。 


. 在 工具 属性 栏 中 设置 “字体 系列 、 字 体 大 小 ” 


为 “ 汉 仪 醒 示 体 简 、10 点 ”， 并 将 字体 颜色 
设置 为 “黑色 (#353535 ) ”。 使 用 鼠标 在 


页 面 下 方 单 击 并 输入 网 页 版 权 等 信息 。 


“汉堡 jpg” 素材 图 像 , 对 它们 进行 抠 图 、 填 充 和 调整 颜色 等 操作 ， 


再 将 编辑 好 的 素材 图 像 添加 到 “订餐 网 站 ”中 ， 其 具体 操作 如 下 : 


白色 的 背景 会 影 响 网 站 的 整体 视觉 效果 ， 后 面 将 为 图 像 添加 尖 变 填充 的 背景 效果 ， 所 以 这 


| 旦 需要 先 将 背景 出 除 、 


本 人 


1. 打开 " 暮 条 .jpg" 图 像 , 双 击 背 景 图 层 ， 
将 其 转换 为 普通 图 层 。 

2.， 选择 “ 魔 棒 工 具 ” 国 ， 使 用 鼠标 单 
击 图 像 中 白色 的 区 域 ， 建 立 选区 。 
按 Delete 键 ， 删 除 选区 中 的 图 像 ， 
取消 选区 。 


丁丁 你 的 所 


1.， 按 Ctrl+M 组 合 键 ， 打开“ 曲线 ”对 话 框 。 使 
用 鼠标 在 该 对 话 框 中 调整 曲线 。 
2， 单 击 忆 二 按钮 。 


ME 


”在 调整 食品 类 的 素材 时 ， 为 了 使 食物 | 
| 


WE 


来 更 加 诱 人， 一 般 会 将 食物 颜色 调整 为 稍 
2 下 


i 
六 洲 世 A 
1 
发 


机 丁丁。 调整 浙 变色 并 填充 渐变 

1. 在 工具 箱 中 选择 “渐变 工具 ” 国 ， 在 其 工具 
属性 栏 中 单 击 “ 渐 变样 式 ”， 打开“ 渐变 编 
辑 器 " 对 话 框 , 在 颜色 编辑 栏 中 设置 颜色 为 鹅 
黄色 ( 才 ec294 ) ”和 “粉色 (# 扼 eadb ) ”。 

2， 单 击 EM 按钮 。 

3 将 “鼠标 ”图 像 旋转 后 放 在 图 像 右边 。 新 建 

图 层 1， 将 其 放置 在 图 层 0 下 方 。 

使 用 鼠标 从 左下 角 向 右上 角 拖 动 , 填充 渐变 。 


综合 实例 演练 


AGE 和 设置 图 层 样式 


1 选择 【 图 层 ] /【 图 层 样式 】/【 外 发 光 】 命令 ， 
打开 “图 层 样式 ”对 话 框 ， 在 其 中 设置 “不 


透明 度 、 扩 展 、 大 小 ”为 “75、28、73" 。 
2， 单 击 EEEaE =] 按 钮 。 


he 
| 
| 


全 


bd 
HRB) BE -& ED 
Cj 音 
于 (NM) | 
Be) |] 
JRCGD -| 
各 (Pp) 


对 二 


和 (0255)L) 本 
MWg) 。 国 双 
2 团 二 加 (Y) 到 二 (8) 
团 二 4) 。 同 交 R 同 IN) 


32 < 
Hour: 
人 


二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


05 输入 宣传 语 


选择 “ 横 排 文字 工具 ” 国 ， 使 用 鼠标 在 图 像 中 单 
击 输 入 文本 。 选 中 输入 的 “ 送 ” 文 字 图 层 ， 为 该 
文字 图 层 添加 “投影 ”和 “渐变 破 加 ”图 层 样式 。 
设置 “渐变 又 加 "样式 的 渐变 样式 为 " 红 、 绿 渐变 " 。 


ANEE 8 二 添加 描 边 效果 


1.， 在 "图 层 "面板 中 选择 图 层 1, 按 Ctrl+A 组 合 键 ， Er | 
选择 图 层 1 的 所 有 图 像 区 域 。 选 择 [ 编辑 J[ 描 | 
边 】 命令 ， 打开 EE 描 边 ” 对 话 框 ， 设置 “宽度 ” 加 内 如 (J 居中 (C) 居 外 (U) 
为 “40”， 选 中 可 BO 单 选 按钮 。 (J 设置 二 s 

2， 单 击 EEC 按钮 。 mo ] 


本 本 和 # 尼 


在 “图 层 ” 面 板 中 选择 所 有 的 图 层 ， 按 Ctrl+E 组 
合 键 ， 合 并 所 有 的 图 层 。 


人 编辑 汉堡 图 像 


打开 “汉堡 jpg” 图 像 ， 使 用 制作 “ 董 条 ”图 像 
的 方法 编辑 “汉堡 ”图 像 。 


| 可 “汉堡 ” 国 像 的 像素 比 “ 著 条 ” 
| 图 像 的 像素 大 ,所 以 在 使 用 “ 描 边 ”命令 时 “ 宽 
1 度 " 会 设置 的 比 “ 著 条 ”图 像 大 。 


Ei ' 


STEPI10 有 绘制 形状 

1.， 新 建 “形状 ”图 层 组 ， 新 建 图 层 。 

2.， 将 前 景色 设置 为 "灰色 ( 帮 17171) "使 用 " 自 
定形 状 工 具 ” 国 ， 在 图 像 上 绘制 形状 。 再 使 
日“ 直线 工具 ” 国 ， 在 图 像 绘 制 分 割 线 ， 并 
输入 文本 。 


STEPII 人 人 为 网 站 切片 
在 工具 箱 中 选择 “切片 工具 ” 国 ， 使 用 鼠标 在 图 


像 上 拖 动 ， 为 网 站 创建 切片 。 


了 半 
网 页 结构 越 复杂 的 图 像 ， 其 切片 数 
量 也 就 越 多 。 由 于 切片 数量 很 多 ， 用 户 在 进行 
保存 时 ， 会 将 一 些 不 需要 的 切片 图 像 也 保存 到 
文件 夹 中 。 此 时 ， 用 户 只 需 将 所 有 切片 保存 起 
来 ， 再 在 保存 切片 图 像 的 文件 夹 中 ， 将 不 需要 
的 切片 图 像 删 除 。 


读书 笔记 


STEPI09> 添加 图 像 


综合 实例 演练 


新 建 “素材 图 像 " 图 层 组 , 使 用 "移动 工具 " 国 


“ 暮 条 ”图 像 移动 到 “订餐 网 


站 首页 ”图 像 


中 ， 并 将 它们 缩小 。 


- 将 “订餐 网 站 ”图 层 组 中 的 所 有 素材 图 像 都 
移动 到 “订餐 网 站 首页 ”中 ， 并 为 部 分 图 像 


设置 不 同 的 


辐 层 透明 度 。 


ie 

RE 

添加 】 。w 全 量 g 洛 加 
节 匡 2 fe a 


二 计 滞 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


TE 存储 切片 i | 


选择 【文件 ] /【 存储 为 Web 所 
格式 】 命令 ， 打 开 “ 存 储 为 MED 
Web 所 用 格式 ( 100% ) ”对 话 5 
框 。 在 “优化 的 文件 格式 ”下 后 
拉 列 表 框 中 选择 “GIF” 选 项 。 ee 
2、 单 击 [GER 二 本 按钮 ， 在 打开 的 Ca 
对 话 框 中 选择 需要 保存 的 位 置 
以 及 保存 的 名 称 即 可 。 
Te 
Ee i 
| ”为 了 加 快 网 页 的 显示 


这 里 将 优化 的 文件 格式 | im [RE 
| 设置 为 GIF 格式 。 记 @ 
和 > 个 本 DE DN DE Le | 


站 一 般 在 对 图 像 进行 切片 时 ， 都 会 把 保存 的 图 像 格式 设置 为 “gif” 或 “png”， 这 样 可 加 快 下 载 | 
| 过度。 需要 注意 的 是 ， 如 果 用 户 使 用 的 是 png 格式 的 图 像 ， 则 在 Photoshop 中 编辑 的 选 明 区 域 将 被 保存 。 


12.2 上 机 1 小 时 : 制作 RMWT 网 站 宣传 动画 

现在 很 多 网 站 首页 上 都 会 出 现 一 些 用 于 宣传 最 近 热点 的 滚动 播放 图 像 。 这 些 图 像 能 第 一 时 
间 内 激 起 浏览 者 的 兴趣 ， 从 而 更 进一步 地 在 网 站 中 搜寻 自己 感 兴趣 的 网 页 内 容 。 同 时 滚动 播放 
的 效果 能 更 进一步 的 活跃 网 页 ， 让 整个 网 页 动静 分 明 。 


12.2.1 实例 目标 


通过 本 例 的 制作 ， 全 面 巩固 Flash 的 使 用 方法 ， 主 要 包括 组 件 的 创建 、 补 间 动 画 的 创建 和 
使 用 ， 以 及 脚本 的 使 用 等 。 编 辑 完成 后 ， 用 户 只 需 单 击 动画 中 的 按钮 即 可 切换 画面 ， 其 最 终 效 
果 如 下 图 所 示 。 


E28-2014.182A19 
2 


12.2.2 ”制作 思路 


本 动画 的 制作 思路 大 致 可 以 分 为 两 个 部 
分 ， 第 一 部 分 是 制作 、 编 辑 元 件 ， 第 二 部 分 


二 mt sm | 
为 元 件 输入 脚本 。 2 


综合 实例 演练 


12.2.3 ”制作 过 程 
下 面 详细 讲解 “RMWT 网 站 宣传 动画 ”动画 的 制作 过 程 。 


1. 制作 元 件 
下 面 首先 启动 Flash， 然 后 新 建 动画 文档 创建 元 件 并 为 元 件 创建 补 间 动 画 等 ， 其 具体 操 
作 如 下 : 


wi 新 建文 档 


启动 Flash， 选 择 【 文件 】/【 新 建 】 命 
打开 新建 文档 " 对 话 框 , 在 其 中 设置 " 和 
背景 颜色 " 为 "1050、400、 灰 色 ( #999999 )" 。 


人 
Re 


WE 新 建 元 件 


选择 【文件 ] 人 导入 】 /【 导入 到 库 】 命 令 ， 
打开 “导入 到 库 ” 对 话 框 。 将 “订餐 网 站 宣 
传动 画 ” 文 件 夹 中 的 所 有 文件 都 导入 到 “ 库 ” 
面板 中 。 选 择 【 插入 】/【 新 建 元 件 】 命 令 ， 
打开 “创建 新 元 件 ” 对 话 框 ， 在 其 中 设置 “名 
称 、 类 型 ”为 “广告 1、 图 形 ”。 

2 单 击 EEsE 可 按钮 ， 进 入 元 件 编辑 窗口 。 


本 hn 

从 " 库 " 面 板 中 将 "广告 1.jpg" 图像 ,移动 到 舞台 中 。 
ie 
有 二 和 


Hour: 


二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


AGE 地。 创建 补 间 动 画 


1.， 创建 一 个 名 为 “页 1” 的 影片 剪辑 ， 从 “ 库 ” 
面板 中 将 “广告 1” 元 件 移动 到 舞台 中 。 在 第 
1 帧 上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选 
择 “ 创 建 补 间 动 画 ” 命 令 。 
2.， 将 补 间 动 画 的 最 后 一 帧 移动 到 第 15 帧 的 位 
置 。 选 择 第 15 帧 , 按 F6 键 , 插入 属性 关键 帧 。 
3. 使 用 “移动 工具 ” 国 将 图 像 向 左 平移 。 


本本 太吉 元 件 民 性 

1. 选择 第 1 帧 。 

2. 再 选择 “广告 1” 元 件 。 

3.， 在 “属性 ”面板 的 “色彩 效果 ” 栏 中 设置 “ 样 
式 、Alpha” 为 “Alpha、10”。 选择 第 15 帧 ， 
并 选择 其 中 的 元 件 ， 使 用 相同 的 方法 设置 元 
件 的 "Alpha" 为 “100”， 制 作 渐 现 的 效果 。 


和 


1. 新 建 图 层 2， 在 第 15 帧 插入 关键 帧 。 

2.， 按 F9 键 ， 打开 “动作 ”面板 ， 在 其 中 输入 脚 
本 。 使 用 相同 的 方法 编辑 制作 “页 2”、“ 页 
3” 元 件 。 


上 回 图 号 2:15 


第 1 和 (此 1 行 ) ,第 8 天 


2. 为 元 件 输入 脚本 
在 制作 好 元 件 后 ， 用 户 就 可 以 在 场景 中 应 用 元 件 ， 并 为 元 件 输入 脚本 ， 以 实现 交互 功能 ， 
其 具体 操作 如 下 : 


综合 实例 演练 上 


AGE 最。 编辑 其 他 元 件 


1. 返回 场景 1， 选 择 第 1 帧 。 
2. 从 “ 库 ” 面 板 中 将 “页 1” 图 像 移动 到 舞台 外 
的 右边 并 缩小 。 


20\ 肠 虽 训 不 窜 、 


本 绘制 形状 


新 建 图 层 2， 使 用 “椭圆 选 框 工 具 ” 国 和 “ 钢 
笔 工具 ”网 绘制 一 个 按钮 ， 并 将 按钮 群 组 。 
2.， 在 绘制 的 按钮 旁边 复制 按钮 ， 并 将 其 水 平 
翻转 。 
3. 选中 左边 的 按钮 , 按 F8 键 , 打开 “转换 为 元 件 ” 
对 话 框 ,在 其 中 设置 “类 型 " 为 "影片 剪辑 ”。 
4. 单 击 EEE 梧 按钮 。 


名 

1. 选择 “元 件 1” 元 件 。 

2.， 在“ 属性" 面板 中 设置 “实例 名 称 " 为 “p1”。 
使 用 相同 的 方法 将 “元 件 2” 的 “实例 名 称 " 
设置 为 “p2”。 在 第 3 帧 插入 关键 帧 。 


输入 脚本 


建 图 层 , 将 其 重 命名 为 “Actions”。 选择 第 1 帧 ， 
ee 打开 “动作 ”面板 ， 在 其 中 输入 脚本 。 


LE 


簧 5 行 ( 划 13 行 )， 第 2 列 


Hour: 


证 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


AGE 最 输入 脚本 并 测试 ms 
在 第 3 帧 插入 关键 帧 , 在 "动作" 面板 中 输入 脚本 。 EN 
并 按 Ctri+Enter 组 合 键 ， 测 试 动画 。 ee 


| 9 suione:s 周 
乏 1 行 ( 估 1 行 ) , 宗 8 列 


12.3 上 机 1 小 时 : 制作 订餐 网 站 首页 

本 次 实例 是 根据 前 面 Photoshop 制作 出 的 订餐 网 站 首页 图 像 ， 使 用 Dreamweaver CS6 制作 
出 订餐 网 站 的 首页 “index.html” 页 面 。 
12.3.1 实例 目标 


通过 本 实例 的 制作 ， 全 面 地 掌握 使 用 Dreamweaver CS6 制作 网 站 的 方法 ， 而 这 里 制作 订 
餐 网 站 主要 使 用 到 DIV+CSS 布局 的 方法 、CSS 代码 的 编辑 以 及 网 页 中 各 种 对 象 的 插入 方法 及 
属性 编辑 等 相关 知识 ， 最 终 效果 如 下 图 所 示 。 


12.3.2 ”制作 思路 


在 制作 本 次 实例 网 站 首页 时 ， 大 致 可 以 分 为 4 个 操作 步骤 。 第 1 步 是 对 整体 网 站 进行 DIV 
局 ， 将 整个 网 页 看 成 是 3 个 部 分 ， 分 别 为 上 、 中 和 下 3 部 分 ;第 2 步 是 制作 网 页 头 部 内 容 ， 
对 上 部 分 的 各 种 链接 及 banner 进行 添加 设置 ， 第 3 步 是 制作 中 间 部 分 ， 也 是 整个 网 页 显示 的 
内 容 部 分 ， 第 4 步 是 制作 网 页 底部 的 信息 链接 内 容 。 


制作 网 页 信 
吝 链接 “ 妈 


12.3.3 ”制作 过 程 


下 面 将 详细 讲解 订餐 网 首页 “index.ht 


”文档 的 制作 过 程 。 


1. DIV+CSS 布局 网 页 


下 面 将 在 Dreamweaver CS6 中 新 建 一 个 .html 网 页 并 命名 为 “index” 


体 布局 ， 其 具体 操作 如 下 : 


i 新 建 网 页 并 插入 DIV 标签 


在 Dreamweaver CS6 中 新 建 一 个 .html 网 页 ， 
并 将 其 命令 名 "index”。 

2. 将 插入 点 定位 到 网 页 编辑 区 中 ,选择 【插入 】/ 
【 布局 对 象 ] /【 Div 标签 】 命令, 打开 “" 插 
入 Div 标签 ”对 话 框 。 


Ei 新 建 CSS 规则 


在 打开 对 话 框 的 “类 ”下 拉 列 表 框 中 输入 插 
入 DIV 标签 的 类 名 “main”。 
2.， 单 击 世 本 5 观 旭 按钮 。 
3. 在 打开 对 话 框 的 “规则 定义 ”下 拉 列 表 框 中 
选择 “新 建 样式 表 文件 ”选项 。 


， 并 为 该 网 页 进行 整 


Dw CoE  ，] 宇 对 权 : 


Hour: 


Ti 设置 “边框 ”的 属性 什 


选择 “边框 ”选项 卡 。 
中 将 "Style" 的 属性 值 设 置 为 "solid”, 将 "Width” 
设置 为 “1px”, 将 “Color" 设置 为 " 帮 00" 。 
3， 依 次 单 击 EEBE 滞 按钮， 完成 main 的 CSS 规 
则 定义 。 


Ti 插入 其 他 DIV 标签 


在 网 页 编辑 区 中 将 插入 的 DIV 标签 中 的 文本 
删除 ， 并 将 插入 点 定位 到 其 中 ， 分 别 插入 3 
个 DIV 标签 ， 并 分 别 命名 为 “top”、“ceter” 
和 “bottom”。 

2. 并 分 别 对 其 添加 CSS 规则 ， 设 置 其 “ 方 框 
0“ 边 框 ”的 属性 值 ， 打 开 CSS 文件 ， 查 看 
设置 的 属性 值 。 


二 计 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


‘STEP 03: 保存 CSS 样式 文件 


1. 在 打开 的 对 话 框 中 选择 网 页 所 在 的 文件 夹 ， 
在 “文件 名 ”文本 框 中 输入 CSS 文件 的 名 称 
“Style” 。 

2 单 击 Easea 按 钮 ， 完 成 CSS 文件 保存 操作 。 


本 本 议 蝇 “ 广 E" 的 属性 值 

1.， 在 打开 的 “.main 的 CCS 规则 定义 ”对 话 框 
中 选择 “ 方 框 ”选项 卡 。 

2.， 分 别 将 "Width”" 和 "Height" 的 值 设置 为 "1024" 
和 "980"”。 

3 将 “Margin” 栏 的 所 有 值 设 置 为 “auto”， 
让 其 DIV 标签 在 网 页 中 居中 显示 。 


Dw ani 
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本 本 合用 Div+css 布 局 


使 用 相同 的 方法 ， 在 不 同 的 DIV 标签 中 添加 其 他 
DIV 标签 ， 并 为 其 设置 CSS 规则 ， 其 布局 最 终 效 
果 如 右 图 所 示 。 


他 
a 
| 景 图 片 ， 而 这 些 背景 图 片 的 设置 需要 通过 CSS | 
| 规则 进行 定义 ， 并 且 可 能 使 用 到 background- | 
LTepeat 属性 ， 设 置 其 背景 图 片 的 平 铺 方式 。 


2. 制作 头 部 内 容 


下 面 将 制作 网 页 的 头 部 ， 在 头 部 添加 链接 SWF 及 图 像 ， 并 对 添加 的 内 容 进 行 相应 的 属性 。。 = 
设置 ， 其 具体 操作 如 下 : 355 
72 口 
本 丁丁 使 用 代码 插入 Div 标 答 i Hows 
9 | 
切换 到 “代码 " 视图 中 , 将 插入 点 定位 到 名 为 "top。 | 因 
人 扳 | 讽 天 阁 图 地. 区. 及 pe A 


dh_right” 的 DIV 标签 之 中 ， 并 输入 代码 <div 
class="top_nav"></div> 插入 名 为 top_nav 的 DIV 
标签 。 


an"> 
<dly class="cop gn lerc"> 


i 

| EB 如 有 呆 插 入 的 DIV 标签 过 多 ， 用 户 可 a 

| 切换 到 “代码 ”视图 中 直接 输入 DIV 标签 的 rioht_ ceter">¢/div> 
改 


] 
| 
| 
| mpann' 
| day classrwbenner_righr_bocromyyk/Glvy 
| dav> 

| 

| 

| 


| 代码 ， 并 对 其 命名 ， 并 复制 DIV 标签 ， 修 a 
| 其 DIV 标签 的 命名 进行 快速 插入。 | EB , :< 
醒 醒 使 用 代码 添加 文本 链接 CE 


将 插入 点 定位 到 刚 插入 的 DIV 标签 中 ， 输 入 一 辣 
<ul></ul> 标记 ,并 在 该 标记 内 使 用 <li></li> 标记 ， | 

在 <li></li> 标记 中 使 用 <a></a> 标记 ， 并 添加 
href 属性 , 设置 其 属性 值 为 “#” 表 示 添加 空 链 接 。 
并 在 <a></a> 标记 之 间 添 加 文本 。 


> 同上 站 氏 </a>< 
> 优 喜 券 </a></ 


39 如 介 醒 De 


出 空 文本 链接 ， 再 为 各 标记 添加 相应 的 CSS ， 
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Hour: 


有 有 :主讲 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


本 十 hn css 规则 


新 建 一 个 CSS 样式 表 文 件 ， 并 命名 为 “link. 

， 在 其 中 添加 CSS 规则 代码 ， 将 文本 链接 
的 字体 设置 为 “16px”， 设 置 链 接 的 字体 颜色 为 
"#FFF”，, 设置 链接 后 的 字体 颜色 为 “#fc600”。 


症 人 和 ee 
过 “CSS 样式 ” 面板 查看 添加 的 CSS 规则 ，， 

并 打开 “link” 样 式 文件 ， 在 “代码 ”视图 中 

进行 查看 。 | 


TE 编辑 标签 添加 属性 值 


切换 到 “设计 ”视图 中 ， 在 窗口 左下 角 选 择 
<a> 标签 。 

2.， 按 Ctrl+T 组 合 键 , 打开 “编辑 标签 ”编辑 器 ， 
在 其 中 输入 代码 style="color#ffc600"， 设 置 
所 选 文本 链接 的 默认 颜色 为 黄色 。 


ER 


i | 天 全 FI 和 省 疝 刘 


EXE EO RR 


AGE 68 昌 打开 “选择 SWF” 对 话 框 
1。 将 插入 点 定位 到 图 标 下 方 的 DIV 标签 内 。 
2 选择 【插入 ] /【 媒 体 ] / [SWF ] 命令 ， 打 开 
“选择 SWF” 对 话 框 。 
i, 
_ 读 大 各 记 


ER 66 最， 添加 SWF 对 旬 


1. 在 打开 的 对 话 框 中 选择 需要 添加 的 SWF 对 象 
的 存储 位 置 ， 选 择 添加 的 对 象 。 

2.， 依 次 单 击 EEEE 梧 按钮， 完成 SWF 对 象 的 添 
加 操作 。 


AGE 泊 加 表格 


1 将 插入 点 定位 到 Flash 文件 右 侧 的 DIV 标签 
中 ， 选择 [插入 】/ 表格 ] 命 令 , 打开“ 表格" 
对 话 杠 。 

2， 将 " 行 数 ”、“ 列 ”、“ 表 格 宽度 ”、“ 边 
入 和 “单元 格 间距 ”分 别 设置 为 “3”、 
“2” 、"247”、"0” 和 “10” 。 

3。 单 击 [E 囊 本 按钮， 完成 表格 添加 。 


本 丁丁 添加 肖 景 图 像 及 文本 


1. 将 插入 点 定位 在 第 一 个 单元 格 中 , 并 切换 到 " 拆 
分 ”视图 中 ， 输 入 文本 “早餐 ”。 

2.， 在 <td></td> 标记 里 添加 属性 "background=""， 
单 击 弹出 的 浮动 按钮 ES 可。 

3.， 在 打开 的 对 话 框 中 选择 图 像 文件 “cdt_03. 
jpg 。 

4 单 击 EEBEa 按 钮 ， 完 成 表格 的 背景 添加 。 


Ra 二 FE 


ca bacxgxound- 

imageaycar_ 19.1pqr> 下 年 第 /rad> 
tq packgrouna= 

"imageaycdr_09.1Dg"> 聊 保 c/=a> 


ed backgzound- 
让 2 dd 


w=] 
ee CR 


tdyc/vdy 


<ra yc/ta> 
/tr> 
/table> 
/div> 时 


上 « [mp 
DOT A) 


二 人 三 中 
| 在 插入 表格 时 ， 设 置 的 单元 格 间距 ， 
1， 在 CSS 规 则 属性 中 表现 为 性 “cellspacing”。 | 
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本 本 本 添加 其 他 背景 图 像 及 文本 


使 用 相同 的 方法 ， 在 其 他 单元 格 中 添 力 


0 图 像 。 
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说 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


本 二 hn css 规则 


1.， 在 “ 拆 分 ”视图 中 的 <head></head> 标记 中 
添加 CSS 规则 。 

2.， 即 可 在 “ 拆 分 ”视图 右 侧 窗 格 中 查看 设置 后 
的 效果 。 


LU 


lu) 
a OM 


3. 制作 网 页 的 中 间 部 分 
下 面 将 制作 网 页 的 中 间 部 分 ， 在 分 别 布局 的 DIV 标签 中 添加 相应 的 DIV 标签 ， 输 入 相应 
的 文本 ， 添 加 相应 的 图 片 对 象 和 CSS 文件 对 各 对 象 进行 设置 ， 其 具体 操作 如 下 


hn DV 村 答 
将 插入 点 定位 到 背景 图 声音 标志 图 右 侧 的 DIV 标 |e sve ee usess sueumaau 

签 内 。 依 次 添加 3 个 DIV 标签 ， 并 设置 其 “类 ” EE 
名 为 “ceter_text”， 并 在 其 中 输入 文本 。 


i "et 
站 ee 


在 “县 计 ? 视图 中 则 不 容易 进行 定位 ， 此 时 可 | 
| 通过 切换 到 “代码 ”或 “ 拆 分 ”视图 中 进行 快 | 
4 速 定位 。 | 


本 丁丁 六 建 css 规则 样式 表 


1. 选择 刚 输入 文本 的 第 一 个 DIV 标签 。 

2.， 在 "属性 "面板 中 单 击 [Es 按钮 , 打开 “CSS 
样式 ”面板 。 

3.， 在 “CSS 样式 ”浮动 面板 中 单 击 “ 新 建 CSS 
规则 ”按钮 回 , 打开 “新建 CSS 规则 ”对 话 框 。 


ia - ~ ] 
i 对 呈 -EL | 


Jade 


综合 实例 演练 


i 新 建 CSS 规则 样式 表 


在 打开 对 话 框 中 的 “选择 器 类 型 ”下 拉 列 表 
框 中 选择 “类 ”选项 。 

2.， 在 “选择 器 名 称 ” 下 拉 列 表 框 中 输入 名 称 
“ceter_ text”。 

3.， 在 “规则 定义 ”下 拉 列 表 框 中 选择 “新 建 样 
式 表 文件 ”选项 。 

4， 单 击 EEE 按钮 。 


保存 样式 文件 


在 打开 的 对 话 框 中 选择 样式 文件 所 存储 的 位 
置 ， 在 “文件 名 ”文本 框 中 输入 样式 表 文件 
的 名 称 “Style text"”。 

2 单 击 EBE9a 可 按钮 ， 即 可 在 新 建 的 样式 表 文件 中 
存在 一 个 名 为 “ceter_text” 的 样式 规则 。 


RE 地 ， 设 置 css 规则 属性 值 
1.， 在 打开 对 话 框 中 选择 “类 型 ”选项 卡 。 
2.， 分 别 将 “Font_family”、“Font-size" 和 “Color” 


的 属性 值 设置 为 “黑体” 、“11" 和 “#FFF”。 


醒 醒 古 设 生 其他 CSS 规则 属性 值 


1.， 在 打开 对 话 框 的 “区 块 ”选项 卡 下 将 “Text- 
align” 设 置 为 “center” 居 中 显示 。 

2.， 在 “ 方 框 ” 选 项 卡 下 将 “Width”、 “Heigth” 
和 “Float" 分 别 设置 为 “280” 、"40" 和 "left” 。 

3 分别 在 “Padding” 和 “Margin” 列 表 框 中 取 
消 选中 日生 加 复 选 框 。 

4.， 分别 将 “Top” 和 “Left" 的 属性 值 设置 为 “10” 
和 “15”。 

5 单 击 EEBEa 按 钮 , 完成 CSS 规 则 属性 的 设置 。 
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本 本 Nn Span 标记 


1. 选择 文本 前 的 “》” 符 号 。 

2.， 按 Ctrl+T 组 合 键 打开 环绕 编辑 器 ， 在 其 输入 
代码 span style="color:#e56a00"， 将 所 选 符 
号 设置 为 “ 深 纯色 ”。 


人 二 区 全 全 二 
这 里 使 用 Span 标记 是 为 了 单独 设置 

“》 ”符号 的 样式 ， 而 使 用 “环绕 ”编辑 器 可 

直接 在 选择 的 对 象 两 侧 添加 标记 ， 对 其 进行 


3 


醒 本 而 添加 其 他 的 Span 标记 

在 网 页 编辑 区 中 选择 "〈《” 符 号 ， 使 用 相同 的 
方法 为 其 添加 Span 标记 ， 并 将 其 颜色 设置 为 
"#e56a00”。 


LA 
读书 笔记 


IE 制作 box_ceter 部 分 


将 插入 点 定位 到 box_ceter 标签 
之 间 ， 在 其 中 添加 DIV 标签 
入 文本 和 添加 图 片 。 
2.， 切换 到 “ 拆 分 ”视图 中 ， 查 看 其 
代码 。 


LI 


ET 


梧 二 hn css 规则 


1. 在 Style_text 样式 表 文 件 中 添加 CSS 规则 设 
置 DIV 标签 的 属性 值 ， 将 图 片上 面部 分 的 文 
本 字体 、 字 号 和 颜色 分 别 设置 为 “ 汉 仪 醒 示 
体 简 ”、“18” 和 “#717171”。 

2. 将 图 片 下 面部 分 的 文本 字体 、 字 号 和 颜色 分 
别 设置 为 "黑体 ”、“14” 和 “#FFF”。 


Ne i ie 
De ceter 标签 中 的 内 容 时 ， 首 先 要 使 用 DIV+CSS 对 其 进行 一 个 简单 的 布局 和 定位 ， 
从 后 -能 在 DIV 标签 中 添加 文本 和 图 片 ， 并 对 其 文本 的 属性 值 进行 设置 上 图 左 侧 的 代码 是 一 个 布局 、 
文本 和 图 片 的 添加 ， 而 右 侧 则 是 一 个 最 终 的 布局 效果 ， 而 CSS 规则 则 需要 在 Style_text 样式 表 文件 中 进 | 
行 查看 。 相 同 布局 和 定位 的 内 容 ， 可 直接 使 用 相同 的 CSS 规则 样式 。 | 

| 


A NN 


ft toceterrr 部 分 。 [国生 


1.， 将 插入 点 定位 到 box_ceter 标签 之 间 ， 
在 其 中 添加 DIV 标签 ， 输入 文本 和 添 
加 图 片 。 

2. 切换 到 “ 拆 分 ”视图 中 ， 查 看 其 代码 。 


人 


/a 
qlv class="bocton">c/divzc/dlv> 


TA -人 本 硬 ceeoo。 lotky/ 间 各 上 


WTEP 2 > 制作 box_ceter11 


1.， 在 Style_text 样式 表 文 件 中 添加 CSS 规则 ， 
并 设置 DIV 标签 的 属性 值 ， 将 图 片上 面部 分 
的 文本 字体 、 字 号 和 颜色 分 别 设置 为 “ 汉 仪 
醒 示 体 简 ”、“18” 和 "#FFF”。 

2.， 将 图 片 下 面部 分 的 文本 字体 、 字 号 和 颜色 分 
别 设置 为 “黑体”、“14” 和 “#FF”。 


AL 
读书 笔记 


.box_text1 
Ee width:180px; 
text-align:center; 
font-family: "黑体"; 
font-size:14px; 
Color:#FFF; 
text-align:center; 
float:left; 


32 《 
Hour: 
从 


22 
Hour 


~ 
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二 让 河 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


二 


在 “设计 ”视图 中 即 可 查看 
制作 后 的 效果 。 


4. 制作 网 页 信息 链接 


下 面 将 制作 网 页 底部 的 信息 链接 内 容 ， 只 需 在 网 页 编辑 区 中 添加 一 个 DIV 标签 ， 并 在 标 
签 中 使 用 项 目 列表 标签 ,使 用 CSS 规则 对 其 进行 定位 ,并 进行 相应 的 属性 设置 ,其 具体 操作 如 下 : 


AGE hn DIV 标 答 


1， 将 插入 点 定位 到 网 页 编辑 区 域 的 底部 ， 添 
加 一 个 DIV 标签 ， 并 将 其 命名 为 “bottom_ 
link” 。 

2. 切换 到 “ 拆 分 ”视图 中 查看 其 代码 。 


Ulead 
_ 读书 笔 记 


本 本 添加 项 目 列表 


1. 保持 插入 点 的 定位 ， 切 换 到 “设计 ”视图 ， 
单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 【 列 
表 】/ 【项 目 列表 】 命令 。 

在 添加 的 项 目 符号 后 , 输入 文本 “关于 


; | 全 
[Das Sar > [US [0 er et 7 6 WW niesle nm | 


本 二 本 添加 其 他 项 目 符号 和 文本 


在 文本 后 按 Enter 键 ， 连 续 添加 3 个 项 目 符号 ， 


并 在 每 个 项 目 符号 后 输入 文本 。 


视图 中 按 Enter 键 进行 添加 外 ， 还 可 在 “代码 ” 
视图 中 ， 使 用 复制 粘贴 的 方法 快速 添加 多 个 项 
目 符号 。 


TCA DESO 


AGEE 0 添加 链接 


1. 选择 第 一 个 项 目 符号 后 的 文本 。 


2， 按 Ctrl+T 组 合 键 ， 打 开 “ 环 绕 ” 编 辑 器 ， 在 
其 中 输入 代码 <a href=" 太 >， 为 所 选择 文本 添 


加 链接 标记 。 


人 各 


户 忘记 输入 结束 标记 时 ， 该 编辑 器 会 自动 添加 
1 匹配 的 结束 标记 。 


3 e 
在 使 用 “环绕 ”编辑 器 时 ， 如 果 用 


柄 让 
添加 多 个 项 目 符号 时 ,除了 在 “设计 ” 


3 


Serle css link ess Siyle Lert css swfobjeet modifled js 


’ 
or I dA) 


本 本 为 其 他 文本 添加 链接 
使 用 相同 的 方法 ， 为 其 他 几 个 项 目 符号 所 在 的 广 
本 添加 链接 。 


SEED 606 最， 添加 CSSs 规则 属性 值 


1， 在 网 页 标题 栏 中 选择 “link.css” 选 项 ， 切 换 
到 link 样式 文件 表 中 。 

2. 在 该 文档 中 添加 其 CSS 规则 的 属性 及 属性 值 ， 
让 未 链接 前 的 文本 颜色 为 “#353535”， 链 
接 的 后 的 文本 颜色 为 “#ffc600”。 


LE 


二 让 滞 新 手 学 做 网 站 (Dreamweaver+Flash+Photoshop CS6 版 ) 


AGE 有 添加 H4 标记 

1， 将 插入 点 定位 在 链接 文本 的 下 方 ， 单 击 鼠 标 
右键 ,在 弹出 的 快捷 菜单 中 选择 "标题 4" 命 令 ， 
插入 <h4></h4> 标记 。 在 标记 之 间 输 入 文本 。 
2.， 在 "CSS 样式 " 面板 中 双击 “.bottom" 规则 名 。 


机 位置 

1.， 在 打开 的 对 话 框 中 选择 “区 块 ”选项 卡 ， 将 
“Text-align” 属 性 设置 为 “center” 居 中 显示 。 

2， 单 击 EEME 按钮 ， 保 存 网 页 ， 完 成 整个 例子 

的 所 有 操作 。 


CO mw sR | 


12.4 练习 1 小 时 


本 章 主要 通过 制作 一 个 从 无 到 有 的 网 站 首页 ， 充 分 地 使 用 了 3 个 软件 ， 包 括 使 


PhotoShop 进行 网 页 设计 、 使 用 Flash 制作 Banner 动画 ， 最 后 使 用 Dreamweaver 制作 一 个 完整 
的 网 页 ， 但 用 户 要 熟练 地 使 用 这 3 个 软件 制作 一 个 完整 的 网 站 ， 还 需要 进行 一 些 操作 练习 ， 下 
面 将 以 制作 家 具 网 站 首页 为 例 进行 巩固 练习 。 


制作 家 具 网 站 首页 


本 例 将 制作 家 具 
网 站 首页 的 动态 部 分 ， 
即 设置 网 站 首页 ， 然 
后 将 其 切片 ， 并 使 用 
Dreamweaver 将 其 制作 
成 静态 ， 完 成 后 的 最 终 
效果 如 右 图 所 示 。 


航 录 A 


一 、Dreamweaver 的 使 用 技巧 


1. 将 配置 好 的 文件 快速 复制 到 另 一 台电 脑 上 


若 想 将 已 经 配置 好 的 文件 快速 复制 到 另 一 台电 脑 上 ， 可 在 “站 点 管理 ”对 话 框 中 的 站 点 
列表 框 中 选择 需要 复制 的 站 点 ， 单 击 贺 按钮 ， 在 打开 的 对 话 框 中 根据 提示 进行 操作 ， 可 将 
站 点 设置 保存 为 一 个 文件 。 再 将 文件 复制 到 另 一 台电 脑 上 ， 在 “站 点 管理 ” 对 话 框 中 单 击 
按钮 ， 然 后 在 打开 的 对 话 框 中 选择 并 打开 保存 的 站 点 文件 即 可 完成 操作 。 


2. 选择 网 页 文字 的 技巧 


在 行业 中 并 没有 对 网 页 中 使 用 的 字体 有 任何 硬性 规定 ， 用 户 只 需 根据 网 站 的 类 型 自行 设置 。 
但 需要 注意 的 是 ， 为 使 网 站 中 的 文字 在 不 同 浏览 器 上 字号 一 致 ， 字 号 建议 用 点 数 pt 和 像素 px 
来 定义 。pt 一 般 使 用 中 文 宋体 的 9pt 和 11pt，px 一 般 使 用 中 文 宋体 12px 和 14.7px， 这 是 经 过 
优化 的 字号 , 黑体 字 或 者 宋体 字 加 粗 时 , 一 般 选 用 11pt 和 14.7px 的 字号 比较 合适 。 为 了 网 页 美观 ， 
每 页 排版 不 要 太 朴 或 用 太 大 的 字 ， 也 不 要 让 一 行 或 一 段 文 本 太 长 。 同 一 页 中 不 要 使 用 太 多 的 分 
隔 线 ， 否 则 网 页 看 起 来 会 显得 支离破碎 。 


3. 网 页 图 像 的 选用 技巧 


为 加 快 页 面 的 下 载 速度 ， 网 页 中 的 图 像 应 尽量 采用 gif、jpg 压缩 格式 。 每 幅 图 像 要 有 本 图 
像 的 说 明文 字 ( 即 “ 蔡 换文 本 ”属性 ) ， 这 样 即使 图 像 不 能 正常 显示 ， 用 户 也 可 知道 图 像 所 在 
位 置 代表 什么 意思 ， 以 便 及 时 进行 修改 。 此 外 ， 还 需 注意 要 设置 图 像 的 宽度 和 高 度 ， 以 免 图 像 
不 能 正常 显示 时 ， 出 现 页 面 混乱 现象 。 为 了 增强 网 页 浏览 的 顺畅 性 ， 不 要 每 页 都 采用 不 同 的 背 
景 图 像 ， 应 该 采用 相同 的 底 色 或 背景 图 像 ， 可 增加 网 页 一 致 性 ， 树 立 风格 。 这 种 方式 可 以 大 大 
节约 下 载 图 像 的 时 间 。 


4. 修改 文本 超级 链接 


超级 链接 颜色 默认 为 蓝 色 , 若 有 特殊 需要 用 户 也 可 对 其 进行 修改 。 其 方法 是 : 选择 [ 修改 】/ 
【页 面 属性 ] 命令 , 打开 “页 面 属性 ”对 话 框 ， 在 左 侧 的 “分 类 ”列表 框 中 选择 “链接 ( CSS ) " 
选项 ， 然 后 在 右 侧 的 窗 格 中 设置 链接 的 颜色 和 已 访问 链接 的 颜色 ， 并 且 可 以 对 链接 的 下 划 线 等 


行 设置 。 
5， 调整 表格 属性 

表格 的 “填充 ” ( 单元 格 边 距 ) 属性 对 表格 的 大 小 有 直接 的 影响 。 如 果 已 经 设置 了 表格 
属性 值 ， 则 可 使 整个 表格 变 宽 。 除 了 通过 设置 “填充 ” 属 
影响 外 ， 表 格 的 “单元 格 间距 ”属性 也 会 对 单元 格 的 宽度 产生 影响 ， 
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此 在 设计 表格 的 宽度 、 单 元 格 的 宽度 时 , 需 将 “填充 " 和 “单元 格 间距 ”属性 的 影响 考虑 在 内 。 


四 


将 内 部 样式 表 中 的 样式 保存 为 外 部 样式 表 

在 “CSS 样式 ”面板 中 选中 任意 内 部 样式 表 名 称 ， 并 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 
中 选择 “移动 CSS 规则 ”命令 。 在 打开 的 “ 移 至 外 部 样式 表 ” 对 话 框 中 选中 @ 样 # 表 6): 单 选 按 
钮 ， 单 击 按钮 ， 打 开 “ 保 存 样式 表 文 件 为 ”对 话 框 ， 在 “文件 名 ”文本 框 中 输入 样式 
表 文 件 的 名 称 ， 最 后 单 击 三 二 = 按钮 。 


7. 手动 更 新 站 点 中 用 模板 制作 的 网 页 
选择 【 修改 ] 人 模板 】/【 更 新 页 面 】 命令 ， 打 开 “ 更 新 页 面 ” 对 话 框 ， 在 “查看 ”下 拉 


列表 框 中 选择 “整个 站 点 ”选项 ， 在 其 后 的 下 拉 列 表 框 中 选择 站 点 名 称 。 单 击 Eee 按钮 ， 
Dreamweaver 即 会 将 整个 站 点 中 用 模板 创建 的 网 页 文档 自动 进行 更 新 。 


8.， 为 整个 框架 集 统一 设置 背景 
先 创建 一 个 外 部 层 芥 样式 表 文 件 ， 并 定义 好 网 页 背景 颜色 ， 再 将 其 链接 到 各 框架 网 页 中 ， 
如 果 需 要 修改 背景 颜色 ， 直 接 修改 外 部 层 夫 样式 表 文件 中 网 页 背景 的 颜色 即 可 。 


9. 使 框架 变 得 更 加 灵活 


为 使 框架 更 加 灵活 地 控制 网 页 的 内 容 ， 可 使 用 <iframe> 标签 来 创建 浮动 框架 。 在 
Dreamweaver 中 创建 浮动 框架 的 方法 是 : 选择 【插入 】/【HIML 】/【 框架 】/【IFrame 】 命 令 ， 
将 自动 在 页 面 中 插入 一 个 浮动 框架 ， 并 且 页 面 会 自动 切换 到 “ 拆 分 ”视图 ， 并 在 代码 中 生成 
<iframe></iframe> 标签 。 此 时 ， 该 框架 中 没有 任何 内 容 ， 需 对 框架 的 属性 进行 设置 。<iframe> 
标签 常见 的 写法 为 : 

<iframe src="main.html" scrolling="no" width="1002px" height="774px" frameborder 


="0" name="main"></iframe> 


10. 消除 网 页 中 的 乱码 


有 时 在 预览 制作 的 网 页 时 ， 会 发 现 网 页 中 的 文本 内 容 显 示 为 乱码 ， 产 生 这 种 现象 的 原因 是 
在 网 页 中 没有 指明 网 页 所 使 用 的 编码 所 造成 的 。 通 常 中 文 网 页 都 使 用 “GB2312” 编 码 ， 只 需 
在 网 页 的 <head> </head> 标签 中 输入 代码 “<meta http-equiv="Content-Type" content="text/html; 
charset=gb2312" />” 即 可 。 


11. 将 网 页 设置 为 禁止 保存 


在 浏览 网 页 时 ， 浏 览 者 可 以 选择 浏览 器 窗口 中 的 【 页 面 】 /【 另存 为 】 命 令 保存 网 页 。 若 
网 页 制作 者 不 想 浏 览 者 保存 网 页 ， 可 以 在 网 页 的 “<head>…</head>” 标 记 之 间 添 加 一 段 代码 
“<noscript><iframe src=*.html></ifame></noscript>” 来 禁止 保存 网 页 。 添 加 该 段 代码 后 ， 当 
户 在 对 网 页 执行 保存 操作 时 ， 将 打开 一 个 提示 对 话 框 ， 提 示 无 法 保存 该 网 页 。 


秘技 连连 看 BE 


12. 去 掉 单 击 超级 链接 后 的 图 像 虚线 


单 击 图 像 超 级 链接 后 ， 通 常会 在 图 像 周 围 出 现 虚线 ， 显 得 不 美观 ， 这 时 ， 可 添加 
“onFocus="this-blur0"” 代 码 来 解决 此 问题 ， 完 成 的 图 像 链接 代码 如 下 所 示 : 
<a href="index.html" onFocus="this.blur()"><img src="logo.jpg" border=0></a> 


二 、Flash 的 使 用 技巧 


在 绘制 图 形 时 ,通过 图 像 的 擦 除 同样 可 以 得 到 一 些 奇 异 的 形状 。 在 Flash 中 , “橡皮 擦 工具 " 回 
于 擦 除 整个 图 形 或 者 图 形 中 不 需要 的 部 分 ， 选 择 “ 橡 皮 擦 工具 ” 圆 ， 将 鼠标 移动 到 需要 擦 除 
的 位 置 ， 按 住 鼠 标 进行 拖 动 即 可 进行 擦 除 。 如 果 用 户 想 对 图 像 进行 擦 除 ， 首 先 需 选中 图 像 ， 再 
按 CtrltB 组 合 键 分 离 图 像 ， 最 后 使 用 “橡皮 擦 工具 ”区 进 行 擦 除 。 


2. 使 用 选择 工具 调整 形状 的 方法 


在 "工具 " 面板 中 选择 “选择 工具 ”NW , 在 选项 区 中 有 3 个 按钮 帮助 用 户 更 细致 地 调整 形状 ， 
单 击 不 同 的 按钮 可 为 形状 调整 不 同 的 效果 。 各 按钮 的 作用 介绍 如 下 。 

人 “ 贴 紧 至 对 象 ”按钮 网 : 单 击 该 按钮 ， 选 择 工具 国 具 有 自动 吸附 功能 ， 能 够 自动 搜索 线条 

的 端点 和 图 形 边 框 。 

所 “平滑 ”按钮 天 : 单 击 该 按钮 ， 可 以 使 调整 的 曲线 趋 于 平滑 。 

侣 “ 伟 直 ”按钮 圈 : 单 击 该 按钮 ， 可 以 使 调整 的 曲线 趋 于 直线 ， 用 来 修饰 曲线 。 


3. 合并 绘制 模式 


Flash 的 默认 绘图 方式 是 合并 绘图 方式 ， 在 该 模式 下 用 户 在 同一 图 层 中 绘制 不 同 颜色 的 两 
个 图 形 ， 若 是 重 到 起 来 位 于 上 方 的 图 形 将 会 与 位 于 下 方 图 形 的 重 又 部 分 裁剪 掉 。 若 是 在 同一 图 
层 绘 制 两 个 相同 颜色 的 图 形 ， 则 两 个 图 形 将 会 被 合并 在 一 起 。 这 种 绘图 方式 在 用 户 绘制 特殊 图 
形 时 经 常会 使 用 到 。 


4. 快速 复制 关键 帧 


通过 快速 复制 关键 帧 的 方法 可 以 加 快 制 作 动 画 的 效率 。 快 速 复制 关键 帧 的 方法 是 : 选择 需 
要 复制 的 关键 帧 ， 按 住 Alt 键 同 时 ， 按 住 鼠 标 左 键 拖 到 鼠标 到 需要 的 位 置 ， 释 放 鼠 标 即 可 。 


5. 粘贴 传统 补 间 属 性 


在 制作 一 些 补 间 动 画 时 ， 如 果 一 个 动画 效果 需要 反复 制作 ， 用 户 就 可 以 通过 粘贴 传统 补 间 
属性 的 方法 来 制作 这 些 操作 繁琐 的 补 间 动 画 。 粘 贴 传统 补 间 属 性 的 方法 是 : 选择 包含 动画 效果 
图 层 的 一 个 补 间 、 若 干 空白 帧 或 多 个 补 间 ， 再 选择 【 编辑 ] /【 时 间 轴 】/【 复制 动画 】 命令 ， 
选择 接收 所 复制 的 传统 补 间 的 元 件 实例 ， 选 择 【 编辑 ] /【 时 间 轴 】/【 选择 性 粘贴 动画 】 命令 ， 
在 打开 的 对 话 框 中 设置 要 粘贴 的 动画 项 目 ， 如 位 置 、 大 小 、 滤 镜 和 图 像 混 合 样式 等 。 
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6. 将 MP3 声音 导出 为 WAV 文件 


在 Flash 中 用 户 可 以 直接 通过 Flash 将 MP3 声音 导出 为 WAV 文件 。 其 方法 是 : 将 MP3 导 
入 到 时 间 轴 上 ， 再 使 用 【文件 】/【 导出 】/【 导出 影片 】 命 令 ， 将 文档 中 的 所 有 声音 导出 为 一 
个 WAV 文件 。 


7. 声音 的 编辑 技巧 


编辑 声音 文件 时 ， 用 户 除了 采样 比率 和 压缩 外 ， 还 可 以 使 用 下 面 几 种 方法 来 进行 编辑 : 

四 在 “编辑 封套 ”对 话 框 中 设置 切入 和 切 出 点 ， 避 免 静音 区 域 存储 在 Flash 文件 中 ， 减 小 文 
件 中 的 声音 数据 的 大 小 。 

和 则 通过 在 不 同 的 关键 帧 上 应 用 不 同 的 声音 效果 ， 从 同一 声音 中 获得 更 多 的 变化 。 只 需 一 个 声 
音 文件 就 可 以 得 到 许多 声音 效果 。 

加 使 用 短 声 音 循环 播放 作为 背景 音乐 。 

四 不 将 音频 流 设置 为 循环 播放 。 

刀 在 说 入 的 视频 剪辑 中 导出 音频 时 ， 在 “发 布设 置 ”对 话 框 中 ， 所 选 的 全 局 流 设置 为 导出 。 
当 在 编辑 器 中 预览 动画 时 , 使 用 流 同步 让 动画 和 音 轨 保持 同步 。 如 果 电 脑 运行 速度 不 够 快 ， 
绘制 动画 帧 的 速度 可 能 会 跟 不 上 音 轨 ， 这 样 Flash 就 会 跳 过 帧 。 


8.， 哄 入 视频 的 注意 事项 和 技巧 


为 了 保证 嵌入 视频 在 动画 中 的 正常 播放 ， 用 户 在 嵌入 视频 前 需要 注意 以 下 事项 : 

人 四 下 载 和 尝试 播放 包含 谈 入 视频 的 大 SWF 文件 时 ，Flash Player 会 保留 大 量 内 存 ， 这 可 能 会 
导致 Flash Player 播放 失败 ， 所 以 嵌入 到 动画 中 的 视频 不 易 过 大 。 

委 超 过 10 秒 的 视频 ， 在 视频 剪辑 的 视频 和 音频 部 分 之 间 存 在 同步 问题 。 所 以 在 播放 一 段 时 
间 以 后 ， 音 频 轨 道 的 播放 与 视频 的 播放 之 间 开 始 出 现 差 异 ， 导 致 音频 和 视频 不 同步 。 在 插 
入 这 类 视频 前 ,就 需要 用 户 先 查看 插入 视频 的 播放 速度 ,一般 FLV 视频 的 播放 速度 是 15 帧 。 
插入 视频 后 ， 需 要 将 Flash 的 帧 速率 设置 为 12 帧 。 

让 默认 情况 下 ， 在 播放 说 入 视频 的 SWF 时 ， 必 须 先 下 载 整个 视频 文件 ， 然 后 再 开始 播放 该 
视频 。 如 果 嵌 入 的 视频 文件 过 大 ， 浏 览 者 网 速 太 慢 很 可 能 需要 很 长 时 间 才 能 下 载 完 整个 
SWF 文件 ， 然 后 才能 开始 播放 。 

四 导入 视频 剪辑 后 ， 便 无 法 对 其 进行 编辑 。 若 想 编辑 视 频 ， 用 户 必须 重新 编辑 再 重新 导入 视 
频 文 件 。 

办 为 编辑 方便 ， 导 入 的 视频 文件 的 长 度 不 能 超过 16000 帧 。 


三 、Photoshop 的 使 用 技巧 


在 Photoshop 中 对 图 像 进 行 编辑 后 ，“ 历 史记 录 ” 面 板 中 将 保留 用 户 最 近 操 作 的 一 些 记录 ， 
在 该 面板 中 可 选择 需要 恢复 到 的 操作 步骤 。 单 击 选择 某 条 记录 后 ， 位 于 该 记录 下 方 的 记录 将 变 
为 灰色 显示 ， 用 户 可 以 单 击 这 些 选项 查看 这 些 记录 的 效果 。 若 重新 对 图 像 进行 操作 ， 这 些 记 录 
将 消失 ， 而 重新 记录 当前 的 操作 。 


秘技 连连 看 BE 


2. 控制 图 像 显示 大 小 


在 图 像 编辑 的 过 程 中 ， 经 常 需要 对 图 像 显示 的 大 小 进行 控制 ， 以 便 查 看 图 像 的 效果 。 用 户 
可 采取 以 下 方法 进行 控制 。 

但 放大 图 像 显示 比例 : 按 CtrlHSpace 组 合 键 切换 到 放大 工具 , 此 时 可 单 击 和 鼠标 放大 图 像 显 示 ; 
也 可 直接 按 Ctrl++ 组 合 键 放 大 图 像 显示 ; 或 按 CtrlHAltt+ 组 合 键 自动 调整 窗口 以 全 屏 放 
大 显示 。 

但 缩小 图 像 显示 比例 : 按 Alt + Space 组 合 键 切 换 到 缩小 工具 ， 此 时 再 单 击 和 鼠标 可 缩小 图 像 
显示 ; 也 可 直接 按 Ctrl+- 组 合 键 缩小 图 像 显示 ; 或 按 CtrlHAlt+- 组 合 键 自动 调整 窗口 以 全 
屏 显示 图 像 。 


3. 增加 黑白 照片 层次 感 


将 彩色 照片 转换 为 黑白 照片 时 ， 可 先 选 择 【 图 像 ] /【 模式 】/ 【Lab 颜色 】 命令 ,将 颜色 
模式 转化 为 Lab 模式 ， 然 后 再 打开 “通道 ”面板 ,对 其 中 的 明度 通道 执行 【 图像 ]/【 模式 ] 作 灰 
度 ] 命令 ,将 照片 转换 为 黑白 照 。 这 是 因为 Lab 模式 的 色 域 更 宽 , 转化 后 的 图 像 层次 感 更 丰富 。 


4. 制作 从 实 到 虚 过 渡 的 效果 
在 Photoshop 里 有 时 会 制作 由 实 到 虚 的 过 渡 效 果 ， 产 生 移动 透明 到 不 透明 的 图 像 效果 。 制 | 


作 从 实 到 虚 过 渡 的 方法 是 : 首先 在 需 过 渡 的 区 域 建立 选区 ， 再 通过 创建 图 层 蒙 版 的 方法 ， 新 建 
一 个 图 层 ， 再 设置 一 个 黑白 的 渐变 即 可 。 


5.， 滤 镜 的 作用 范围 和 使 用 注意 事项 
滤 镜 命令 只 能 作用 于 当前 正在 编辑 的 可 见 图 层 或 图 层 中 的 所 选区 域 ， 另 外， 也 可 对 整 幅 


图 像 应 用 滤 镜 。 要 对 图 像 使 用 滤 镜 ， 必 须要 了 解 图 像 色 彩 模 式 与 滤 镜 的 关系 。 其 中 RGB 颜色 
模式 的 图 像 可 以 使 用 Photoshop 中 的 所 有 滤 镜 。 不 能 使 用 滤 镜 的 图 像 色彩 模式 有 位 图 模式 、 
16 位 灰 度 图 模式 、 索 引 模式 和 48 位 RGB 模式 。 有 的 色彩 模式 图 像 只 能 使 用 部 分 滤 镜 ， 如 在 
CMYK 模式 下 不 能 使 用 画笔 描 边 、 素 描 、 纹理 、 艺 术 效果 和 视频 类 滤 镜 。 滤 镜 操作 方法 虽然 简单 ， 
但 是 在 使 用 时 仍 需 注意 以 下 几 点 : 

得 滤 镜 可 以 反复 应 用 ， 但 一 次 只 能 应 用 在 一 个 目标 区 域 中 。 

得 滤 镜 不 能 应 用 于 位 图 模式 、 索 引 颜色 模式 的 图 片 文件 中 。 

由 某 些 滤 镜 只 对 了 RGB 颜色 模式 的 图 像 起 作用 。 


6. 重复 滤 镜 效果 


一 些 滤 镜 效果 在 应 用 到 图 像 上 时 ， 效 果 并 不 明显 。 需 要 对 滤 镜 重复 应 用 ， 重 复 滤 镜 效 果 有 
两 种 情况 ， 其 操作 分 别 介绍 如 下 。 
所 不 改 参 数 的 完全 重复 使 用 : 当 使 用 完 一 个 滤 镜 命令 后 ， 最 后 一 次 使 用 的 滤 镜 将 出 现在 “ 滤 
镜 ” 菜 单 的 顶部 ， 选 择 该 命令 或 按 CtrltF 组 合 键 ， 将 以 上 次 设置 的 参数 重复 执行 相同 的 
滤 镜 命令 。 
所 需 更 改 参数 的 重复 使 用 : 按 Ctrl+AlttF 组 合 键 ， 可 以 打开 上 次 设置 的 滤 镜 参数 对 话 框 ， 在 
其 中 也 可 对 参数 重新 进行 设置 。 
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7. ”对 文字 使 用 滤 镜 

在 Photoshop 中 , 不 能 直接 对 文字 使 用 滤 镜 。 若 想 对 文字 使 用 滤 镜 效果 , 就 需 将 文字 栅 格 化 。 
栅 格 化 文字 的 方法 是 : 在 “图 层 ” 面板 中 使 用 鼠标 右键 单 击 文字 图 层 ， 在 弹出 的 快捷 菜单 中 选 
择 “ 栅 格 化 文字 ”命令 后 再 使 用 滤 镜 即 可 。 


8. 为 一 个 图 像 添加 多 个 滤 镜 


如 果 需 要 对 一 个 图 像 同 时 使 用 多 个 滤 镜 ， 可 以 在 “ 滤 镜 库 ” 对 话 框 的 右 下 角 单 击 “ 新 建 效 
果 图 层 ” 按 钮 名， 在 原 效果 层 上 新 建 一 个 效果 图 层 ， 选 择 相应 的 效果 层 后 可 应 用 其 他 滤 镜 效果 ， 
从 而 实现 多 个 滤 镜 的 堆栈 效果 。 


9. 使 修复 的 图 片 更 加 逼真 


在 使 用 如 “仿制 图 章 工具 ” 轿 、“ 海 绵 工具 ”图 等 进行 涂抹 时 ， 有 时 会 觉得 涂抹 后 的 图 像 
效果 显得 不 太 自然 。 此 时 ， 可 在 涂抹 前 先 将 画笔 样式 设置 为 有 和 柔 边 的 画笔 样式 ， 涂 抹 的 手法 也 
可 以 改 为 单 击 。 此 外 ， 也 可 再 多 建立 几 个 取样 点 让 图 片 显 示 得 更 加 逼真 。 


10. 使 用 外 部 画笔 


在 处 理 、 装 饰 一 些 图 像 时 ,用 户 可 通过 载 入 外 部 画笔 ， 然 后 使 用 外 部 画笔 对 图 像 进行 绘制 。 
使 用 外 部 画笔 的 方法 是 ， 在 网 上 下 载 一 些 漂亮 的 外 部 画笔 选择 “画笔 工具 ” 轿 ， 在 工具 栏 中 
单 击 “ 画 笔 样式 ”下 拉 列 表 框 ， 在 弹出 的 画笔 样式 选择 列表 栏 右边 单 击 国 按 钮 ， 在 弹出 的 下 拉 
列表 中 选择 “ 载 入 画笔 " 选项， 在 打开 的 “ 载 入 画笔 "对话 框 中 选择 之 前 下 载 的 外 部 画笔 文件 ， 
单 击 ERsa 按 钮 。 


11. 将 画笔 预 设 恢复 成 默认 状态 


当 “ 画 笔 样式 ”下 拉 列 表 中 载 入 的 画笔 过 多 或 需要 默认 画笔 预 设 时 ， 可 将 “画笔 预 设 ” 选 
项 栏 中 的 画笔 复位 。 其 方法 是 : 在 “画笔 预 设 ” 面 板 中 单 击 国 按 钮 ， 在 弹出 的 下 拉 列 表 中 选择 
“复位 画笔 ”选项 。 


72 小 时 后 该 如 何 提升 


在 创作 本 书 时 ， 虽 然 我 们 已 尽 可 能 设身处地 为 您 着 想 ， 希 望 能 解决 您 遇 到 的 所 有 与 网 站 制作 相 
关 的 问题 ， 但 我 们 仍 不 能 保证 面面俱到 。 如 果 您 想 学 到 更 多 的 知识 ， 或 学 习 过 程 中 遇 到 了 困惑 ， 还 
可 以 采取 下 面 的 渠道 。 


加 强 实际 操作 


俗话 说 : “实践 出 真知 。” 在 书本 中 学 到 的 理论 知识 未 必 能 完全 融会 贯通 ， 此 时 就 需要 按照 书 
中 所 讲 的 方法 ， 进 行 上 机 实践 ， 在 实践 中 巩固 基础 知识 ， 加 强 自己 对 知识 的 理解 ， 以 将 其 运用 到 实 
际 的 工作 生活 中 。 
2. 总 结 经 验 和 教训 

在 学 习 过 程 中 ， 难 免 会 因为 对 知识 不 熟悉 而 造成 各 种 错误 ， 此 时 可 将 易 犯 的 错误 记录 下 来 ， 并 
多 加 练习 ， 增 加 对 知识 的 熟练 程度 ， 减 少 以 后 操作 的 失误 ， 提 高 目 常 工作 的 效率 。 
3. 多 观看 、 分 析 别 人 制作 的 网 页 作品 

“三 人 行 必 有 我 师 址 ”， 每 个 人 的 阅历 和 生活 环境 各 有 不 同 ， 它 们 直接 影响 了 人 的 创意 和 思维 。 
虽然 这 些 因 素 可 以 让 自己 制作 的 动画 与 他 人 有 所 区 别 ， 但 它们 同样 也 可 以 束缚 思维 。 当 人 遇 到 创意 
瓶颈 时 ， 不 妨 多 在 网 络 上 看 看 别人 制作 的 网 页 作品 ， 看 看 别人 是 如 何 传达 动画 理念 。 


也 可 以 多 问 问 身边 的 朋友 、 前 辈 ， 听 取 他 们 的 不 同意 见 ， 拓 宽 自 己 的 思路 。 同 时 ， 还 可 以 在 网 
络 中 进行 交流 或 互动 ， 如 加 入 相关 的 QQ 技术 群 、 在 百度 知道 和 搜 搜 中 提问 等 。 


盘 录 


和 iphotosnop css 软件 注 有 半 刚 ， 主 问 如 亲 赤 热 ? 中 条 笔 抽 下 网 9 
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果 ,用户 在 前 期 加 工 素材 时 就 应 该 对 素材 进行 精致 的 编辑 。 
声 会 影 、Audition 和 格式 工厂 等 。 其 中 ， 会 声 会 影 用 于 编辑 
入 Flash 中 的 音频 ; 格式 工厂 用 于 转换 素材 的 文件 格式 ,该 软 
0 视频 等 素材 的 格式 。 
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5. 吸取 多 方面 的 专业 知识 


人 
面 的 知识 都 会 应 用 到 。 要 想 制作 出 一 个 优秀 的 网 站 不 但 需要 特别 的 创意 ， 优 质 的 网 站 同样 也 需 
ie a 如 果 缺 乏 了 以 上 的 任何 一 点 都 可 能 会 违背 网 
页 制作 者 的 初 衣 。 如 以 下 列举 的 都 需要 用 户 深入 研究 并 掌握 : 

所 美学 : 练习 专业 的 素描 、 速 写 和 色彩 搭配 。 

户 创意 : 了 解 、 吸 取 各 种 平面 广告 行业 中 常会 使 用 到 的 表达 手法 

所 商业 : 紧 随 目 前 的 商业 潮流 ,将 浏览 人 群 喜欢 的 内 容 及 元 素 , 合理 而 美观 地 放置 在 网 页 中 。 
从 营销 : 很 多 网 站 的 制作 都 是 为 了 宣传 营销 ， 用 户 在 为 网 站 添加 内 容 ， 销 售 商 品 或 概念 时 ， 

应 该 软 硬 臂 施 。 既 需要 打 硬 广 ， 也 需要 采用 软 广 。 合理 的 软 广 往往 能 让 浏览 者 对 浏览 的 网 

站 和 商品 更 有 好 感 ， 常 见 的 软 广 包括 如 软文 、 活 动 游戏 、 线 上 活动 和 线 下 活动 等 。 为 了 使 

网 站 获得 相应 收益 ， 用 户 可 多 多 学 习 营 销 方面 的 制作 。 

户 SEO 优化 : 所 谓 SEO 优化 就 是 搜索 引擎 优化 ， 要 想 让 很 多 人 知道 某 个 网 站 ， 除 了 铺 天 盖 

地 的 广告 宣传 外 ， 还 要 使 用 搜索 引擎 。 而 通过 SEO 优化 ， 可 以 使 自己 制作 的 网 站 的 搜索 

引擎 排名 向 前 提升 ， 从 而 更 加 容易 被 浏览 者 点 击 进 入 浏览 。 


6. 上 技术 论坛 进行 学 习 
本 书 已 将 网 站 的 制作 进行 了 全 面 介绍 ， 但 由 于 篇 幅 有 限 ， 仍 不 可 能 面面俱到 ， 此 时 读者 可 


以 采取 其 他 方法 获得 帮助 。 如 在 专业 的 学 习 网 站 中 进行 学 习 ， 包 括 思 缘 设计 、 中 国 Flash 在 线 
和 懒 人 图 库 等 。 这 些 网 站 各 具 特 色 ， 能 够 满足 不 同 网 站 制作 者 的 需求 。 


思 缘 设计 懒 人 图 库 
网 址 ;http:/www.missyuan.com 网 址 : http://www.lanrentuku.com/lanren 


特色 : 思 缘 设计 是 一 个 综合 性 的 设计 网 站 ， 特色 : 其 中 有 很 多 用 于 网 页 制作 的 图 像素 材 
在 其 本 不 但 能 找到 Photoshop、Flash 中 的 相 ”还 有 不 少 有 用 的 JS 代码 。 用 户 可 在 该 网 站 中 
关 教 程 ， 还 能 找到 其 他 的 一 些 设计 教程 ， 使 ”下 载 需要 使 用 的 素材 ， 并 在 通过 注册 后 进入 
用 户 在 学 习 Photoshop、Flash 之 余 ， 还 能 掌握 论坛， 在 其 中 咨询 不 懂 的 问题 。 

学 习 到 一 些 设计 思路 。 


思 缘 首页 PS 教程 ”教程 搜索 ”论坛 搜索 下载 记录 。 每 日 签到 。 VIP 素材 预 
= 。 ti fled 学。 gs 二。 直入 引 器 世人 半 flash 。 妆 要 雪 村 。 兴 
设 RhRit， 病员 设计。 下 高 二 和 关 国 于 村 特 。 原 册 得 续 和 和 和 


计 流 H6 旦 庙 H 。 载 革 和 作 图 A 村 色 办 # 国 作品 交 蓝 
区 Ri， BBR 区 基板 RH 质 区。 sx 天 FW 区 


二 是 


的 宕 下 罗 Pash 人 用 FLA 条 文件 及 慎 板 12 便 子 才 卉 )C D1 2 3 4 5 6 
尖 下 翰 | 0 虽 失 ] 当 的 fasnat 因 打包 击 划 花 济 吉 宙 六 类 由 本 花 才 论 花 洗 旦 全 WF: 


210 new 


PER 恒 片 网 RH 有 。 款 件 可 。 00 坟 依 。 酮 分 车 。 性 人 工具 入 


| 

六 

EE] [AS 程 ] FLASH 霄 法语 集 之 一 、 闪避 指 仁 (ACTIONSM 内 六 实例 代码 下 立 件 六 便 大 军 学 习 湖 基 信 D1 2 
| 六 | 引出 Fasn C5 村 条例 208 例 [机 条 和 生 下 并 1 D1 2 3 + ss 避 


7. 还 可 以 找 我 们 
本 书 由 九州 书 源 组 织 编写 ， 如 果 在 学 习 过 程 中 遇 到 了 什么 困难 或 疑惑 ， 可 以 联系 九州 书 源 
的 作者 ， 我 们 会 尽快 为 您 解答 ， 关 于 九州 书 源 的 联系 方式 已 经 在 前 言 中 进行 了 介绍 ， 这 里 不 再 


